Skip to content

Commit 7fa3db3

Browse files
pheralbpheralb
committed
feat: integrate tooltip component into various UI elements + update iconSize component
1 parent 5bb27a3 commit 7fa3db3

File tree

6 files changed

+83
-46
lines changed

6 files changed

+83
-46
lines changed

‎website/app/components/card/copyLibraryImport.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { clipboard } from "@/utils";
44
import { toast } from "@pheralb/toast";
55
import { Button } from "@/ui/button";
66
import { CopyIcon } from "lucide-react";
7+
import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/tooltip";
78

89
interface CopyLibraryImportProps {
910
itemName: string;
@@ -34,14 +35,21 @@ const CopyLibraryImport = ({
3435
};
3536

3637
return (
37-
<Button
38-
title="Copy library import"
39-
variant="ghost"
40-
size="icon"
41-
onClick={handleCopyFromLibrary}
42-
>
43-
<CopyIcon size={iconSize} />
44-
</Button>
38+
<Tooltip>
39+
<TooltipTrigger asChild>
40+
<Button
41+
title="Copy library import"
42+
variant="ghost"
43+
size="icon"
44+
onClick={handleCopyFromLibrary}
45+
>
46+
<CopyIcon size={iconSize} />
47+
</Button>
48+
</TooltipTrigger>
49+
<TooltipContent side="bottom" sideOffset={4}>
50+
<p>Copy library import</p>
51+
</TooltipContent>
52+
</Tooltip>
4553
);
4654
};
4755

‎website/app/components/card/copyShadcnCommand.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { toast } from "@pheralb/toast";
55
import { appConfig } from "@/config";
66
import { Button } from "@/ui/button";
77
import { Shadcnui } from "@/ui/icons/svgl";
8+
import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/tooltip";
89

910
interface CopyShadcnCommandProps {
1011
itemName: string;
@@ -27,14 +28,21 @@ const CopyShadcnCommand = ({
2728
});
2829
};
2930
return (
30-
<Button
31-
title="Copy shadcn/ui command"
32-
variant="ghost"
33-
size="icon"
34-
onClick={handleCopyShadcnCommand}
35-
>
36-
<Shadcnui width={iconSize} height={iconSize} />
37-
</Button>
31+
<Tooltip>
32+
<TooltipTrigger asChild>
33+
<Button
34+
title="Copy shadcn/ui command"
35+
variant="ghost"
36+
size="icon"
37+
onClick={handleCopyShadcnCommand}
38+
>
39+
<Shadcnui width={iconSize} height={iconSize} />
40+
</Button>
41+
</TooltipTrigger>
42+
<TooltipContent side="bottom" sideOffset={4}>
43+
<p>Copy shadcn/ui command</p>
44+
</TooltipContent>
45+
</Tooltip>
3846
);
3947
};
4048

‎website/app/components/card/svgExportOptions.tsx‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import { appConfig } from "@/config";
44

55
import axios from "axios";
66
import { toast } from "@pheralb/toast";
7-
import { CloudDownloadIcon, DownloadIcon, LoaderIcon } from "lucide-react";
7+
import {
8+
CloudDownloadIcon,
9+
EllipsisIcon,
10+
LoaderIcon,
11+
XIcon,
12+
} from "lucide-react";
813
import {
914
DropdownMenu,
1015
DropdownMenuContent,
@@ -18,6 +23,7 @@ import { React } from "@/ui/icons/react";
1823

1924
import { clipboard } from "@/utils";
2025
import { downloadFile, tsxToSvg } from "@/utils/svgExport";
26+
import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/tooltip";
2127

2228
interface DownloadSVGProps {
2329
itemName: string;
@@ -30,6 +36,7 @@ const SvgExportOptions = ({
3036
iconSize,
3137
ItemIcon,
3238
}: DownloadSVGProps) => {
39+
const [isOpen, setOpen] = useState<boolean>(false);
3340
const [isLoading, setLoading] = useState<boolean>(false);
3441

3542
const handleDownloadAsSvg = async () => {
@@ -125,21 +132,30 @@ const SvgExportOptions = ({
125132
};
126133

127134
return (
128-
<DropdownMenu>
129-
<DropdownMenuTrigger
130-
title="Export options"
131-
disabled={isLoading}
132-
className={buttonVariants({
133-
variant: "ghost",
134-
size: "icon",
135-
})}
136-
>
137-
{isLoading ? (
138-
<LoaderIcon size={iconSize} className="animate-spin" />
139-
) : (
140-
<DownloadIcon size={iconSize} />
141-
)}
142-
</DropdownMenuTrigger>
135+
<DropdownMenu open={isOpen} onOpenChange={setOpen}>
136+
<Tooltip>
137+
<TooltipTrigger asChild>
138+
<DropdownMenuTrigger
139+
title="More options"
140+
disabled={isLoading}
141+
className={buttonVariants({
142+
variant: "ghost",
143+
size: "icon",
144+
})}
145+
>
146+
{isLoading ? (
147+
<LoaderIcon size={iconSize} className="animate-spin" />
148+
) : isOpen ? (
149+
<XIcon size={iconSize} />
150+
) : (
151+
<EllipsisIcon size={iconSize} />
152+
)}
153+
</DropdownMenuTrigger>
154+
</TooltipTrigger>
155+
<TooltipContent side="bottom" sideOffset={4}>
156+
<p>More options</p>
157+
</TooltipContent>
158+
</Tooltip>
143159
<DropdownMenuContent sideOffset={3}>
144160
<DropdownMenuItem onClick={handleCopyReactComponent}>
145161
<React width={16} height={16} />

‎website/app/components/navbar/iconSize.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,20 @@ const IconSize = () => {
3838
}, [iconSizeValue, searchParams, setSearchParams]);
3939

4040
return (
41-
<Slider
42-
title={`Icon Size: ${iconSizeValue}px`}
43-
showTooltip={true}
44-
value={[Number(iconSizeValue)]}
45-
onValueChange={(value) => setIconSizeValue(value[0])}
46-
max={MAX_SIZE}
47-
min={MIN_SIZE}
48-
step={1}
49-
/>
41+
<div className="flex w-full flex-col space-y-1.5 pb-1 text-zinc-600 hover:text-black md:w-56 md:pb-0 dark:text-zinc-400 dark:hover:text-white">
42+
<div className="flex w-full items-center justify-between">
43+
<p className="text-xs font-medium uppercase select-none">Size</p>
44+
<span className="font-mono text-xs text-zinc-600 dark:text-zinc-400">{`${iconSizeValue}px`}</span>
45+
</div>
46+
<Slider
47+
title={`Icon Size: ${iconSizeValue}px`}
48+
value={[Number(iconSizeValue)]}
49+
onValueChange={(value) => setIconSizeValue(value[0])}
50+
max={MAX_SIZE}
51+
min={MIN_SIZE}
52+
step={1}
53+
/>
54+
</div>
5055
);
5156
};
5257

‎website/app/components/navbar/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,7 @@ const Navbar = () => {
8080
))}
8181
</div>
8282
<Divider className="hidden md:block" />
83-
<div className="flex w-full flex-col space-y-1 pb-1 text-zinc-600 hover:text-black md:w-56 md:pb-0 dark:text-zinc-400 dark:hover:text-white">
84-
<p className="text-xs font-medium uppercase select-none">Size</p>
85-
<IconSize />
86-
</div>
83+
<IconSize />
8784
</div>
8885
</nav>
8986
);

‎website/app/root.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {
3737
} from "remix-themes";
3838
import { themeSessionResolver } from "./sessions.server";
3939
import clsx from "clsx";
40+
import { TooltipProvider } from "./ui/tooltip";
4041

4142
// Links:
4243
export const links: LinksFunction = () => [
@@ -181,7 +182,9 @@ export default function AppWithProviders() {
181182
const data = useLoaderData<typeof loader>();
182183
return (
183184
<ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
184-
<App />
185+
<TooltipProvider>
186+
<App />
187+
</TooltipProvider>
185188
</ThemeProvider>
186189
);
187190
}

0 commit comments

Comments
 (0)