import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { useToast } from "./ui/use-toast"; import { ToastAction } from "./ui/toast"; const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button"; return ; } ); Button.displayName = "Button"; // Image Upload Processor Component export const ImageUploadButton = ({ onUploadComplete, variant = "default", size = "default", }: { onUploadComplete: (url: string) => void; } & VariantProps) => { const { toast } = useToast(); const fileInputRef = React.useRef(null); const handleClick = () => { fileInputRef.current?.click(); }; const handleFileChange = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; try { // In a real app, you would upload the file to your server or a service like Cloudinary // This is a mock implementation const mockUpload = async (file: File) => { return new Promise((resolve) => { setTimeout(() => { const mockUrl = URL.createObjectURL(file); resolve(mockUrl); }, 1000); }); }; const imageUrl = await mockUpload(file); onUploadComplete(imageUrl); toast({ title: "Image uploaded successfully!", description: "Your image is ready to be shared.", }); } catch (error) { toast({ variant: "destructive", title: "Upload failed", description: "There was an error uploading your image.", }); } }; return ( <> ); }; // Clickable Image with Short Link Feature export const ClickableImage = ({ imageUrl, onShortLinkGenerated, }: { imageUrl: string; onShortLinkGenerated?: (shortLink: string) => void; }) => { const { toast } = useToast(); const [shortLink, setShortLink] = React.useState(null); const generateShortLink = async () => { try { // In a real app, you would call your backend to generate a short link // This is a mock implementation const mockGenerateShortLink = async (url: string) => { return new Promise((resolve) => { setTimeout(() => { resolve(`https://shrt.ink/${Math.random().toString(36).substring(2, 8)}`); }, 500); }); }; const link = await mockGenerateShortLink(imageUrl); setShortLink(link); if (onShortLinkGenerated) onShortLinkGenerated(link); toast({ title: "Short link generated!", action: ( { navigator.clipboard.writeText(link); toast({ title: "Copied to clipboard!" }); }} > Copy ), }); } catch (error) { toast({ variant: "destructive", title: "Failed to generate short link", description: "Please try again later.", }); } }; return (

{shortLink && (

{shortLink}

)}

); }; export { Button, buttonVariants };