info icon for version description

goodeats · May 8, 2024 · 0a3685d · 0a3685d
1 parent 800404b
commit 0a3685d
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 0 deletions.
diff --git a/app/components/templates/navbar/index.ts b/app/components/templates/navbar/index.ts
@@ -1 +1,2 @@
 export * from './combobox'
+export * from './tooltip-icon'
diff --git a/app/components/templates/navbar/tooltip-icon.tsx b/app/components/templates/navbar/tooltip-icon.tsx
@@ -0,0 +1,30 @@
+import { Icon, type IconName } from '#app/components/ui/icon'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+export const TooltipIcon = ({
+	icon,
+	text,
+	tooltipText,
+}: {
+	icon: IconName
+	text: string
+	tooltipText: string
+}) => {
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>
+					<Icon name={icon} className="scale-125 max-md:scale-150">
+						<span className="sr-only">{text}</span>
+					</Icon>
+				</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}
diff --git a/app/components/ui/icons/name.d.ts b/app/components/ui/icons/name.d.ts
@@ -40,6 +40,7 @@ export type IconName =
 	| 'gear'
 	| 'github-logo'
 	| 'height'
+	| 'info-circled'
 	| 'instagram-logo'
 	| 'laptop'
 	| 'layers'

diff --git a/app/components/ui/icons/sprite.svg b/app/components/ui/icons/sprite.svg
diff --git a/...etch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/__components/header.artboard.tsx b/...etch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/__components/header.artboard.tsx
@@ -6,6 +6,7 @@ import {
 } from '#app/components/layout'
 import { ComboboxNav } from '#app/components/templates/combobox'
 import { IconLink } from '#app/components/templates/link'
+import { TooltipIcon } from '#app/components/templates/navbar'
 import { NewArtboardVersionSchema } from '#app/schema/artboard-version'
 import { EntityParentIdType } from '#app/schema/entity'
 import { useRouteLoaderMatchData } from '#app/utils/matches'
@@ -58,6 +59,11 @@ export const ArtboardHeader = () => {
 					slugParam="versionSlug"
 					baseUrl={`${baseUrl}/${artboard.slug}/${branch.slug}`}
 				/>
+				<TooltipIcon
+					icon="info-circled"
+					text="Info"
+					tooltipText={version.description}
+				/>
 				{!onLatestVersion && (
 					// this should be displayed when:
 					// - creating a new artboard version

diff --git a/other/svg-icons/info-circled.svg b/other/svg-icons/info-circled.svg
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './combobox'
		export * from './tooltip-icon'