chore: register tooltip provider

This commit is contained in:
Aslam H
2024-09-10 13:08:30 +07:00
parent 4ddb64addd
commit 0b1ea7bc0d
4 changed files with 60 additions and 63 deletions

View File

@@ -9,6 +9,7 @@ import { ConfirmProvider } from "@/lib/providers/confirm-provider"
import { DeepLinkProvider } from "@/lib/providers/deep-link-provider" import { DeepLinkProvider } from "@/lib/providers/deep-link-provider"
import { GeistMono, GeistSans } from "./fonts" import { GeistMono, GeistSans } from "./fonts"
import { JazzAndAuth } from "@/lib/providers/jazz-provider" import { JazzAndAuth } from "@/lib/providers/jazz-provider"
import { TooltipProvider } from "@/components/ui/tooltip"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Learn Anything", title: "Learn Anything",
@@ -20,9 +21,11 @@ const Providers = ({ children }: { children: React.ReactNode }) => (
<ClerkProviderClient> <ClerkProviderClient>
<DeepLinkProvider> <DeepLinkProvider>
<JotaiProvider> <JotaiProvider>
<ConfirmProvider> <TooltipProvider>
<JazzAndAuth>{children}</JazzAndAuth> <ConfirmProvider>
</ConfirmProvider> <JazzAndAuth>{children}</JazzAndAuth>
</ConfirmProvider>
</TooltipProvider>
</JotaiProvider> </JotaiProvider>
</DeepLinkProvider> </DeepLinkProvider>
</ClerkProviderClient> </ClerkProviderClient>

View File

@@ -1,4 +1,4 @@
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { Toggle } from "@/components/ui/toggle" import { Toggle } from "@/components/ui/toggle"
import * as React from "react" import * as React from "react"
@@ -16,31 +16,29 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(fu
ref ref
) { ) {
return ( return (
<TooltipProvider delayDuration={0}> <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <Toggle
<Toggle size="sm"
size="sm" ref={ref}
ref={ref} className={cn(
className={cn( "size-7 rounded-md p-0",
"size-7 rounded-md p-0", {
{ "bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary": isActive
"bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary": isActive },
}, className
className )}
)} {...props}
{...props} >
> {children}
{children} </Toggle>
</Toggle> </TooltipTrigger>
</TooltipTrigger> {tooltip && (
{tooltip && ( <TooltipContent {...tooltipOptions}>
<TooltipContent {...tooltipOptions}> <div className="flex flex-col items-center text-center">{tooltip}</div>
<div className="flex flex-col items-center text-center">{tooltip}</div> </TooltipContent>
</TooltipContent> )}
)} </Tooltip>
</Tooltip>
</TooltipProvider>
) )
}) })

View File

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion" import { motion, AnimatePresence } from "framer-motion"
import { icons } from "lucide-react" import { icons } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { getSpecialShortcut, formatShortcut, isMacOS } from "@/lib/utils" import { getSpecialShortcut, formatShortcut, isMacOS } from "@/lib/utils"
import { LaIcon } from "@/components/custom/la-icon" import { LaIcon } from "@/components/custom/la-icon"
import { useAtom } from "jotai" import { useAtom } from "jotai"
@@ -31,14 +31,12 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
if (tooltip) { if (tooltip) {
return ( return (
<TooltipProvider> <Tooltip delayDuration={0}>
<Tooltip delayDuration={0}> <TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipTrigger asChild>{button}</TooltipTrigger> <TooltipContent>
<TooltipContent> <p>{tooltip}</p>
<p>{tooltip}</p> </TooltipContent>
</TooltipContent> </Tooltip>
</Tooltip>
</TooltipProvider>
) )
} }

View File

@@ -4,7 +4,7 @@ import { FormField, FormItem, FormControl, FormLabel, FormMessage } from "@/comp
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { LinkFormValues } from "./schema" import { LinkFormValues } from "./schema"
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip" import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
import { TooltipArrow } from "@radix-ui/react-tooltip" import { TooltipArrow } from "@radix-ui/react-tooltip"
interface UrlInputProps { interface UrlInputProps {
@@ -38,30 +38,28 @@ export const UrlInput: React.FC<UrlInputProps> = ({ urlFetched, fetchMetadata, i
> >
<FormLabel className="sr-only">Url</FormLabel> <FormLabel className="sr-only">Url</FormLabel>
<FormControl> <FormControl>
<TooltipProvider delayDuration={0}> <Tooltip open={shouldShowTooltip && !isFetchingUrlMetadata}>
<Tooltip open={shouldShowTooltip && !isFetchingUrlMetadata}> <TooltipTrigger asChild>
<TooltipTrigger asChild> <Input
<Input {...field}
{...field} type={urlFetched ? "hidden" : "text"}
type={urlFetched ? "hidden" : "text"} autoComplete="off"
autoComplete="off" maxLength={100}
maxLength={100} autoFocus
autoFocus placeholder="Paste a link or write a link"
placeholder="Paste a link or write a link" className="placeholder:text-muted-foreground/70 h-8 border-none p-1.5 text-[15px] font-semibold shadow-none focus-visible:ring-0"
className="placeholder:text-muted-foreground/70 h-8 border-none p-1.5 text-[15px] font-semibold shadow-none focus-visible:ring-0" onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} onFocus={() => setIsFocused(true)}
onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)}
onBlur={() => setIsFocused(false)} />
/> </TooltipTrigger>
</TooltipTrigger> <TooltipContent align="center" side="top">
<TooltipContent align="center" side="top"> <TooltipArrow className="text-primary fill-current" />
<TooltipArrow className="text-primary fill-current" /> <span>
<span> Press <kbd className="px-1.5">Enter</kbd> to fetch metadata
Press <kbd className="px-1.5">Enter</kbd> to fetch metadata </span>
</span> </TooltipContent>
</TooltipContent> </Tooltip>
</Tooltip>
</TooltipProvider>
</FormControl> </FormControl>
<FormMessage className="px-1.5" /> <FormMessage className="px-1.5" />
</FormItem> </FormItem>