diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/app/dashboard/archive/page.tsx | 10 | ||||
| -rw-r--r-- | apps/web/app/dashboard/tags/page.tsx | 34 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/EditorCard.tsx | 25 | ||||
| -rw-r--r-- | apps/web/components/ui/info-tooltip.tsx | 38 |
4 files changed, 60 insertions, 47 deletions
diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx index 3c3520cc..b2b4df4f 100644 --- a/apps/web/app/dashboard/archive/page.tsx +++ b/apps/web/app/dashboard/archive/page.tsx @@ -1,9 +1,17 @@ import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks"; +import InfoTooltip from "@/components/ui/info-tooltip"; export default async function ArchivedBookmarkPage() { return ( <Bookmarks - header={<p className="text-2xl">🗄️ Archive</p>} + header={ + <span className="flex gap-2"> + <p className="text-2xl">🗄️ Archive</p> + <InfoTooltip size={17} className="my-auto" variant="explain"> + <p>Archived bookmarks won't appear in the homepage</p> + </InfoTooltip> + </span> + } query={{ archived: true }} showDivider={true} /> diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx index 7afe691d..9f5038e7 100644 --- a/apps/web/app/dashboard/tags/page.tsx +++ b/apps/web/app/dashboard/tags/page.tsx @@ -1,13 +1,7 @@ import Link from "next/link"; +import InfoTooltip from "@/components/ui/info-tooltip"; import { Separator } from "@/components/ui/separator"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; import { api } from "@/server/api/client"; -import { Info } from "lucide-react"; function TagPill({ name, count }: { name: string; count: number }) { return ( @@ -48,16 +42,9 @@ export default async function TagsPage() { <span className="flex items-center gap-2"> <p className="text-lg">Your Tags</p> - <TooltipProvider delayDuration={0}> - <Tooltip> - <TooltipTrigger asChild> - <Info size={20} /> - </TooltipTrigger> - <TooltipContent> - <p>Tags that were attached at least once by you</p> - </TooltipContent> - </Tooltip> - </TooltipProvider> + <InfoTooltip size={15} className="my-auto" variant="explain"> + <p>Tags that were attached at least once by you</p> + </InfoTooltip> </span> <div className="flex flex-wrap gap-3">{tagsToPill(humanTags)}</div> @@ -65,16 +52,9 @@ export default async function TagsPage() { <span className="flex items-center gap-2"> <p className="text-lg">AI Tags</p> - <TooltipProvider delayDuration={0}> - <Tooltip> - <TooltipTrigger asChild> - <Info size={20} /> - </TooltipTrigger> - <TooltipContent> - <p>Tags that were only attached automatically (by AI)</p> - </TooltipContent> - </Tooltip> - </TooltipProvider> + <InfoTooltip size={15} className="my-auto" variant="explain"> + <p>Tags that were only attached automatically (by AI)</p> + </InfoTooltip> </span> <div className="flex flex-wrap gap-3">{tagsToPill(aiTags)}</div> </div> diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx index 6858255a..b9e46a30 100644 --- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx +++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx @@ -2,20 +2,14 @@ import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form"; import { useEffect, useImperativeHandle, useRef } from "react"; import { ActionButton } from "@/components/ui/action-button"; import { Form, FormControl, FormItem } from "@/components/ui/form"; +import InfoTooltip from "@/components/ui/info-tooltip"; import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip"; import { toast } from "@/components/ui/use-toast"; import { useClientConfig } from "@/lib/clientConfig"; import { api } from "@/lib/trpc"; import { cn } from "@/lib/utils"; import { zodResolver } from "@hookform/resolvers/zod"; -import { Info } from "lucide-react"; import { useForm } from "react-hook-form"; import { z } from "zod"; @@ -97,18 +91,11 @@ export default function EditorCard({ className }: { className?: string }) { > <div className="flex justify-between"> <p className="text-sm">NEW ITEM</p> - <TooltipProvider delayDuration={0}> - <Tooltip> - <TooltipTrigger asChild> - <Info size={15} /> - </TooltipTrigger> - <TooltipContent className="w-52"> - <p className="text-center"> - You can quickly focus on this field by pressing ⌘ + E - </p> - </TooltipContent> - </Tooltip> - </TooltipProvider> + <InfoTooltip size={15}> + <p className="text-center"> + You can quickly focus on this field by pressing ⌘ + E + </p> + </InfoTooltip> </div> <Separator /> <FormItem className="flex-1"> diff --git a/apps/web/components/ui/info-tooltip.tsx b/apps/web/components/ui/info-tooltip.tsx new file mode 100644 index 00000000..abaf8197 --- /dev/null +++ b/apps/web/components/ui/info-tooltip.tsx @@ -0,0 +1,38 @@ +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; +import { cn } from "@/lib/utils"; +import { HelpCircle, Info } from "lucide-react"; + +export default function InfoTooltip({ + className, + children, + size, + variant = "tip", +}: { + className?: string; + size?: number; + children?: React.ReactNode; + variant?: "tip" | "explain"; +}) { + return ( + <TooltipProvider delayDuration={0}> + <Tooltip> + <TooltipTrigger asChild> + {variant === "tip" ? ( + <Info className={cn("cursor-pointer", className)} size={size} /> + ) : ( + <HelpCircle + className={cn("cursor-pointer", className)} + size={size} + /> + )} + </TooltipTrigger> + <TooltipContent>{children}</TooltipContent> + </Tooltip> + </TooltipProvider> + ); +} |