[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#1a4789", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, gridTemplateColumns: { 14: "repeat(14, minmax(0, 1fr))", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="product-selector.tsx" isEdit="true" "use client" import { ChevronDown, ChevronUp } from "lucide-react" import * as React from "react" import { Button } from "@/components/ui/button" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { cn } from "@/lib/utils" import { useToast } from "@/components/ui/use-toast" import { ToastProvider, ToastViewport } from "@/components/ui/toast" interface ColorOption { id: string name: string class: string gradient: string } interface SizeOption { id: string name: string description: string } const colors: ColorOption[] = [ { id: "pink", name: "Pink", class: "bg-pink-500", gradient: "bg-gradient-to-br from-pink-400 to-purple-500" }, { id: "red", name: "Red", class: "bg-red-500", gradient: "bg-gradient-to-br from-red-500 to-orange-500" }, { id: "orange", name: "Orange", class: "bg-orange-500", gradient: "bg-gradient-to-br from-orange-400 to-pink-600" }, { id: "yellow", name: "Yellow", class: "bg-yellow-400", gradient: "bg-gradient-to-br from-yellow-400 to-orange-500" }, { id: "blue", name: "Blue", class: "bg-blue-500", gradient: "bg-gradient-to-br from-blue-400 to-indigo-600" }, { id: "green", name: "Green", class: "bg-green-500", gradient: "bg-gradient-to-br from-green-400 to-teal-500" }, { id: "darkgreen", name: "Dark Green", class: "bg-green-800", gradient: "bg-gradient-to-br from-green-600 to-teal-700", }, { id: "purple", name: "Purple", class: "bg-purple-600", gradient: "bg-gradient-to-br from-purple-500 to-indigo-600" }, { id: "navy", name: "Ocean Blue", class: "bg-[#1a4789]", gradient: "bg-gradient-to-br from-blue-600 to-indigo-800" }, { id: "darkgray", name: "Dark Gray", class: "bg-gray-800", gradient: "bg-gradient-to-br from-gray-700 to-gray-900" }, { id: "gray", name: "Gray", class: "bg-gray-500", gradient: "bg-gradient-to-br from-gray-400 to-gray-600" }, { id: "black", name: "Black", class: "bg-black", gradient: "bg-gradient-to-br from-gray-800 to-black" }, ] const patterns = [ { id: "pattern1", name: "Pattern 1", class: "bg-gradient-to-r from-pink-200 to-pink-300", }, { id: "pattern2", name: "Pattern 2", class: "bg-pink-100", }, { id: "pattern3", name: "Pattern 3", class: "bg-yellow-100", }, { id: "pattern4", name: "UV Check", class: "bg-[length:4px_4px] bg-[linear-gradient(45deg,#aaf_25%,transparent_25%,transparent_75%,#aaf_75%,#aaf),linear-gradient(45deg,#aaf_25%,transparent_25%,transparent_75%,#aaf_75%,#aaf)] bg-[position:0_0,2px_2px] bg-blue-100", }, { id: "pattern5", name: "UV Stripe", class: "bg-[length:8px_8px] bg-[linear-gradient(90deg,transparent_50%,#4f8130_50%)] bg-green-100", }, { id: "pattern6", name: "UV Stripe", class: "bg-[length:8px_8px] bg-[linear-gradient(90deg,transparent_50%,#ed7648_50%)] bg-orange-100", }, { id: "uv-black", name: "UV Protection", class: "bg-gray-900 flex items-center justify-center text-[10px] text-white font-bold", }, { id: "uv-purple", name: "UV Protection", class: "bg-purple-200 flex items-center justify-center text-[10px] text-purple-800 font-bold", }, { id: "gradient", name: "Gradient", class: "bg-gradient-to-br from-orange-400 to-red-500", }, { id: "gingham", name: "Gingham", class: "bg-[length:8px_8px] bg-[linear-gradient(45deg,#ffd700_25%,transparent_25%,transparent_75%,#ffd700_75%,#ffd700),linear-gradient(45deg,#ffd700_25%,transparent_25%,transparent_75%,#ffd700_75%,#ffd700)] bg-[position:0_0,4px_4px] bg-yellow-100", }, { id: "marble", name: "Marble", class: "bg-gradient-to-br from-gray-200 to-gray-300", }, { id: "stone", name: "Stone", class: "bg-stone-200", }, { id: "rose", name: "Rose", class: "bg-rose-200", }, { id: "grid", name: "Grid", class: "bg-[length:4px_4px] bg-[linear-gradient(to_right,#ddd_1px,transparent_1px),linear-gradient(to_bottom,#ddd_1px,transparent_1px)] bg-white", }, ] const sizes: SizeOption[] = [ { id: "metro", name: "Metro", description: "Your trusted sidekick. Compact, collapsible and convenient for life on the go.", }, { id: "coupe", name: "Coupe", description: "Sleek and stylish, perfect for urban adventures.", }, { id: "classic", name: "Classic", description: "Timeless design with proven reliability.", }, { id: "exec", name: "Exec", description: "Premium features for the distinguished professional.", }, { id: "sport", name: "Sport", description: "Dynamic performance for active lifestyles.", }, { id: "tempus", name: "Tempus", description: "Modern luxury meets practical functionality.", }, ] export default function ProductSelector() { const [isOpen, setIsOpen] = React.useState(false) const [selectedSize, setSelectedSize] = React.useState(sizes[0]) const [isColorOpen, setIsColorOpen] = React.useState(false) const [selectedColor, setSelectedColor] = React.useState(colors.find((c) => c.id === "yellow")!) const { toast } = useToast() return (

Colour

{ const color = colors.find((c) => c.id === value) if (color) setSelectedColor(color) }} className="grid grid-cols-12 gap-2" > {colors.map((color) => (

{color.name}

))}

{patterns.map((pattern) => (

{pattern.id.includes("uv") && UV} {pattern.name}

))}

Size

{sizes.map((size) => ( ))}

) }