settings popover for size

app/components/ui/icons/name.d.ts

@@ -33,6 +33,7 @@ export type IconName =
 	| 'file-minus'
 	| 'file-plus'
 	| 'file-text'
+	| 'gear'
 	| 'github-logo'
 	| 'height'
 	| 'instagram-logo'

app/routes/sketch+/artboards+/$slug_+/components/panel-content-artboard-design-size.tsx

@@ -15,6 +15,7 @@ import { PanelFormArtboardDesignEditSize } from './panel-form-artboard-design-ed
 import { PanelFormArtboardDesignNewSize } from './panel-form-artboard-design-new-size'
 import { PanelFormArtboardDesignReorder } from './panel-form-artboard-design-reorder'
 import { PanelFormArtboardDesignToggleVisibility } from './panel-form-artboard-design-toggle-visibility'
+import { PanelPopoverArtboardDesignSize } from './panel-popover-artboard-design-size'
 
 export const PanelContentArtboardDesignSize = ({
 	artboard,
@@ -73,7 +74,7 @@ export const PanelContentArtboardDesignSize = ({
 						</PanelRowOrderContainer>
 						<PanelRowContainer>
 							<PanelRowValueContainer>
-								{/* <PanelPopoverArtboardDesignPalette size={size} /> */}
+								<PanelPopoverArtboardDesignSize size={size} />
 								<PanelFormArtboardDesignEditSize
 									artboardId={artboard.id}
 									size={size}

app/routes/sketch+/artboards+/$slug_+/components/panel-popover-artboard-design-size.tsx

@@ -0,0 +1,68 @@
+import { Button } from '#app/components/ui/button'
+import { Icon } from '#app/components/ui/icon'
+import { Input } from '#app/components/ui/input'
+import { Label } from '#app/components/ui/label'
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from '#app/components/ui/popover'
+import { type ISize } from '#app/models/size.server'
+
+export const PanelPopoverArtboardDesignSize = ({ size }: { size: ISize }) => {
+	return (
+		<div>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						variant="ghost"
+						className="m-2 mr-0 flex h-8 w-8 cursor-pointer items-center justify-center"
+					>
+						<Icon name="gear">
+							<span className="sr-only">Size Settings</span>
+						</Icon>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-80">
+					<div className="grid gap-4">
+						<div className="space-y-2">
+							<h4 className="font-medium leading-none">Size</h4>
+							<p className="text-sm text-muted-foreground">
+								Settings for this size.
+							</p>
+						</div>
+						<div className="grid gap-2">
+							<div className="grid grid-cols-3 items-center gap-4">
+								<Label htmlFor="format">Format</Label>
+								<Input
+									id="format"
+									defaultValue={size.format}
+									className="col-span-2 h-8"
+									disabled
+								/>
+							</div>
+							<div className="grid grid-cols-3 items-center gap-4">
+								<Label htmlFor="value">Value</Label>
+								<Input
+									id="value"
+									defaultValue={size.value}
+									className="col-span-2 h-8"
+									disabled
+								/>
+							</div>
+							<div className="grid grid-cols-3 items-center gap-4">
+								<Label htmlFor="basis">Basis</Label>
+								<Input
+									id="basis"
+									defaultValue={size.basis}
+									className="col-span-2 h-8"
+									disabled
+								/>
+							</div>
+						</div>
+					</div>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}