-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add tooltip functionality to album artwork and
preview modal components
- Loading branch information
1 parent
04be5eb
commit 4e89d57
Showing
4 changed files
with
151 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { Button } from "components/ui/button"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from "components/ui/dialog"; | ||
| import { ChevronDownCircle } from "lucide-react"; | ||
|
|
||
| export function PreviewModal() { | ||
| return ( | ||
| <Dialog open={false}> | ||
| <DialogTrigger asChild> | ||
| <ChevronDownCircle className="opacity-80 rounded-full shadow-md text-gray-400 cursor-not-allowed" /> | ||
| </DialogTrigger> | ||
| <DialogContent className="sm:max-w-[625px]"> | ||
| <DialogHeader> | ||
| <DialogTitle>View code</DialogTitle> | ||
| <DialogDescription> | ||
| You can use the following code to start integrating your current | ||
| prompt and settings into your application. | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <div className="grid gap-4"> | ||
| <div className="rounded-md bg-black p-6"> | ||
| <pre> | ||
| <code className="grid gap-1 text-sm text-muted-foreground [&_span]:h-4"> | ||
| <span> | ||
| <span className="text-sky-300">import</span> os | ||
| </span> | ||
| <span> | ||
| <span className="text-sky-300">import</span> openai | ||
| </span> | ||
| <span /> | ||
| <span> | ||
| openai.api_key = os.getenv( | ||
| <span className="text-green-300"> | ||
| "OPENAI_API_KEY" | ||
| </span> | ||
| ) | ||
| </span> | ||
| <span /> | ||
| <span>response = openai.Completion.create(</span> | ||
| <span> | ||
| {" "} | ||
| model= | ||
| <span className="text-green-300">"davinci"</span>, | ||
| </span> | ||
| <span> | ||
| {" "} | ||
| prompt=<span className="text-amber-300">""</span>, | ||
| </span> | ||
| <span> | ||
| {" "} | ||
| temperature=<span className="text-amber-300">0.9</span>, | ||
| </span> | ||
| <span> | ||
| {" "} | ||
| max_tokens=<span className="text-amber-300">5</span>, | ||
| </span> | ||
| <span> | ||
| {" "} | ||
| top_p=<span className="text-amber-300">1</span>, | ||
| </span> | ||
| <span> | ||
| {" "} | ||
| frequency_penalty=<span className="text-amber-300">0</span>, | ||
| </span> | ||
| <span> | ||
| {" "} | ||
| presence_penalty=<span className="text-green-300">0</span>, | ||
| </span> | ||
| <span>)</span> | ||
| </code> | ||
| </pre> | ||
| </div> | ||
| <div> | ||
| <p className="text-sm text-muted-foreground"> | ||
| Your API Key can be found here. You should use environment | ||
| variables or a secret management tool to expose your key to your | ||
| applications. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as TooltipPrimitive from "@radix-ui/react-tooltip" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
|
|
||
| const TooltipProvider = TooltipPrimitive.Provider | ||
|
|
||
| const Tooltip = TooltipPrimitive.Root | ||
|
|
||
| const TooltipTrigger = TooltipPrimitive.Trigger | ||
|
|
||
| const TooltipContent = React.forwardRef< | ||
| React.ElementRef<typeof TooltipPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> | ||
| >(({ className, sideOffset = 4, ...props }, ref) => ( | ||
| <TooltipPrimitive.Content | ||
| ref={ref} | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| TooltipContent.displayName = TooltipPrimitive.Content.displayName | ||
|
|
||
| export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters