-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8dd6043
commit 133f736
Showing
11 changed files
with
1,493 additions
and
1,453 deletions.
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
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,35 @@ | ||
| "use client"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from "@ui/components/ui/dialog"; | ||
| import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button"; | ||
| import primaryToolbarMenu from "../ui/primary-toolbar-menu"; | ||
|
|
||
| function ToolbarDownloadBasePalette() { | ||
| const menuItem = primaryToolbarMenu.Download; | ||
| return ( | ||
| <Dialog> | ||
| <DialogTrigger> | ||
| <DesktopPreviewToolbarIcon {...menuItem} /> | ||
| </DialogTrigger> | ||
| <DialogContent> | ||
| <DialogHeader> | ||
| <DialogTitle>Are you sure absolutely sure?</DialogTitle> | ||
| <DialogDescription> | ||
| This action cannot be undone. This will permanently delete your | ||
| account and remove your data from our servers. | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| export default ToolbarDownloadBasePalette; | ||
|
|
||
| ToolbarDownloadBasePalette.displayName = "ToolbarDownloadBasePalette"; |
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,15 @@ | ||
| import ToolbarUploadImage from "./upload-image"; | ||
| import ToolbarDownloadBasePalette from "./download-base-palette"; | ||
| import ToolbarShareableLink from "./shareable-link"; | ||
|
|
||
| // export like <Toolbar.UploadImage /> | ||
|
|
||
| const ToolbarPrimative = ({ children }) => children; | ||
|
|
||
| ToolbarPrimative.displayName = "Toolbar"; | ||
|
|
||
| export const Toolbar = Object.assign(ToolbarPrimative, { | ||
| UploadImage: ToolbarUploadImage, | ||
| DownloadBasePalette: ToolbarDownloadBasePalette, | ||
| ShareableLink: ToolbarShareableLink, | ||
| }); |
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,54 @@ | ||
| "use client"; | ||
| import { | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| } from "@ui/components/ui/popover"; | ||
|
|
||
| import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button"; | ||
| import primaryToolbarMenu from "../ui/primary-toolbar-menu"; | ||
| import { useEffect, useState } from "react"; | ||
| import { Input } from "ui/components/ui/input"; | ||
| import { Button } from "ui/components/ui/button"; | ||
| import { Copy } from "lucide-react"; | ||
| import { useColorStore } from "@/store/store"; | ||
| import { colorHelper } from "@/lib/colorHelper"; | ||
|
|
||
| function ToolbarShareableLink() { | ||
| const menuItem = primaryToolbarMenu.Share; | ||
| const { baseColors } = useColorStore(); | ||
| const [open, setOpen] = useState(false); | ||
| const [src, setSrc] = useState(""); | ||
| const handleCopy = () => { | ||
| navigator.clipboard.writeText(src); | ||
| setOpen(false); | ||
| }; | ||
| useEffect(() => { | ||
| if (!baseColors) return; | ||
| let search = Object.values(baseColors) | ||
| .map((color) => colorHelper.toHex(color)) | ||
| .join(","); | ||
| search = encodeURIComponent(search); | ||
| const url = `${process.env.NEXT_PUBLIC_URL}/?colors=${search}`; | ||
| setSrc(url); | ||
| }, [!!open]); | ||
| return ( | ||
| <Popover open={open} onOpenChange={setOpen}> | ||
| <PopoverTrigger> | ||
| <DesktopPreviewToolbarIcon {...menuItem} /> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-[max(24rem,80%)]" align="end"> | ||
| <div className="flex space-x-2"> | ||
| <Input className="h-8" value={src} readOnly /> | ||
| <Button className="h-8" size="icon" onClick={handleCopy}> | ||
| <Copy className="h-4 w-4" /> | ||
| </Button> | ||
| </div> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| } | ||
|
|
||
| export default ToolbarShareableLink; | ||
|
|
||
| ToolbarShareableLink.displayName = "ToolbarShareableLink"; |
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,35 @@ | ||
| "use client"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from "@ui/components/ui/dialog"; | ||
| import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button"; | ||
| import primaryToolbarMenu from "../ui/primary-toolbar-menu"; | ||
|
|
||
| function ToolbarUploadImage() { | ||
| const menuItem = primaryToolbarMenu["Upload Image"]; | ||
| return ( | ||
| <Dialog> | ||
| <DialogTrigger> | ||
| <DesktopPreviewToolbarIcon {...menuItem} /> | ||
| </DialogTrigger> | ||
| <DialogContent> | ||
| <DialogHeader> | ||
| <DialogTitle>Are you sure absolutely sure?</DialogTitle> | ||
| <DialogDescription> | ||
| This action cannot be undone. This will permanently delete your | ||
| account and remove your data from our servers. | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| export default ToolbarUploadImage; | ||
|
|
||
| ToolbarUploadImage.displayName = "ToolbarUploadImage"; |
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,49 @@ | ||
| "use client"; | ||
|
|
||
| import React from "react"; | ||
| import { Button } from "@ui/components/ui/button"; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "@ui/components/tooltip"; | ||
|
|
||
| const DesktopPreviewToolbarIcon = ({ | ||
| title, | ||
| description, | ||
| icon: Icon, | ||
| }: { | ||
| title: string; | ||
| description: string; | ||
| icon: React.FC<React.SVGProps<SVGSVGElement>>; | ||
| }) => { | ||
| return ( | ||
| <TooltipProvider | ||
| key={`desktop-primary-toolbar-${title}`} | ||
| delayDuration={250} | ||
| > | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button | ||
| variant="ghost" | ||
| aria-label={title} | ||
| size="icon" | ||
| className="flex h-8 w-8 select-none items-center rounded-sm px-1 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" | ||
| asChild | ||
| > | ||
| <div> | ||
| <div className="sr-only">{title}</div> | ||
| <Icon className="h-5 w-5" /> | ||
| </div> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="bottom"> | ||
| <p className="max-w-[10rem]">{description}</p> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ); | ||
| }; | ||
|
|
||
| export default DesktopPreviewToolbarIcon; |
49 changes: 7 additions & 42 deletions
49
apps/web/components/ui/desktop-primary-toolbar-buttons.tsx
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
Oops, something went wrong.