mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-27 05:29:03 +08:00
chore: format codebase
This commit is contained in:
Thomas Camlong
@@ -1,122 +1,109 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { Check, Copy, Download, Github, Link as LinkIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import type React from "react";
|
||||
import { Check, Copy, Download, Github, Link as LinkIcon } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import type React from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
export type IconActionsProps = {
|
||||
imageUrl: string;
|
||||
githubUrl: string;
|
||||
iconName: string;
|
||||
format: string;
|
||||
variantKey: string;
|
||||
copiedUrlKey: string | null;
|
||||
copiedImageKey: string | null;
|
||||
handleDownload: (event: React.MouseEvent, url: string, filename: string) => Promise<void>;
|
||||
handleCopyUrl: (url: string, variantKey: string, event?: React.MouseEvent) => void;
|
||||
handleCopyImage: (imageUrl: string, format: string, variantKey: string, event?: React.MouseEvent) => Promise<void>;
|
||||
};
|
||||
imageUrl: string
|
||||
githubUrl: string
|
||||
iconName: string
|
||||
format: string
|
||||
variantKey: string
|
||||
copiedUrlKey: string | null
|
||||
copiedImageKey: string | null
|
||||
handleDownload: (event: React.MouseEvent, url: string, filename: string) => Promise<void>
|
||||
handleCopyUrl: (url: string, variantKey: string, event?: React.MouseEvent) => void
|
||||
handleCopyImage: (imageUrl: string, format: string, variantKey: string, event?: React.MouseEvent) => Promise<void>
|
||||
}
|
||||
|
||||
export function IconActions({
|
||||
imageUrl,
|
||||
githubUrl,
|
||||
iconName,
|
||||
format,
|
||||
variantKey,
|
||||
copiedUrlKey,
|
||||
copiedImageKey,
|
||||
handleDownload,
|
||||
handleCopyUrl,
|
||||
handleCopyImage,
|
||||
imageUrl,
|
||||
githubUrl,
|
||||
iconName,
|
||||
format,
|
||||
variantKey,
|
||||
copiedUrlKey,
|
||||
copiedImageKey,
|
||||
handleDownload,
|
||||
handleCopyUrl,
|
||||
handleCopyImage,
|
||||
}: IconActionsProps) {
|
||||
const downloadFilename = `${iconName}.${format}`;
|
||||
const isUrlCopied = copiedUrlKey === variantKey;
|
||||
const isImageCopied = copiedImageKey === variantKey;
|
||||
const downloadFilename = `${iconName}.${format}`
|
||||
const isUrlCopied = copiedUrlKey === variantKey
|
||||
const isImageCopied = copiedImageKey === variantKey
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<div className="flex gap-2 mt-3 w-full justify-center">
|
||||
{/* Download Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleDownload(e, imageUrl, downloadFilename)}
|
||||
aria-label={`Download ${iconName} as ${format.toUpperCase()}`}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Download {format.toUpperCase()}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
return (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<div className="flex gap-2 mt-3 w-full justify-center">
|
||||
{/* Download Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleDownload(e, imageUrl, downloadFilename)}
|
||||
aria-label={`Download ${iconName} as ${format.toUpperCase()}`}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Download {format.toUpperCase()}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Copy Image Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleCopyImage(imageUrl, format, variantKey, e)}
|
||||
aria-label={`Copy ${iconName} image as ${format.toUpperCase()}`}
|
||||
>
|
||||
{isImageCopied ? (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<Copy className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Copy image to clipboard</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{/* Copy Image Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleCopyImage(imageUrl, format, variantKey, e)}
|
||||
aria-label={`Copy ${iconName} image as ${format.toUpperCase()}`}
|
||||
>
|
||||
{isImageCopied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Copy image to clipboard</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* Copy URL Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleCopyUrl(imageUrl, variantKey, e)}
|
||||
aria-label={`Copy direct URL for ${iconName} ${format.toUpperCase()}`}
|
||||
>
|
||||
{isUrlCopied ? (
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
) : (
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Copy direct URL</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{/* Copy URL Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="h-8 w-8 rounded-lg cursor-pointer"
|
||||
onClick={(e) => handleCopyUrl(imageUrl, variantKey, e)}
|
||||
aria-label={`Copy direct URL for ${iconName} ${format.toUpperCase()}`}
|
||||
>
|
||||
{isUrlCopied ? <Check className="w-4 h-4 text-green-500" /> : <LinkIcon className="w-4 h-4" />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Copy direct URL</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
{/* View on GitHub Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
|
||||
<Link
|
||||
href={githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`View ${iconName} ${format} file on GitHub`}
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>View on GitHub</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
{/* View on GitHub Button */}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
|
||||
<Link href={githubUrl} target="_blank" rel="noopener noreferrer" aria-label={`View ${iconName} ${format} file on GitHub`}>
|
||||
<Github className="w-4 h-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>View on GitHub</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user