[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" isEdit="true" import SandwichGenerator from "@/components/sandwich-generator" export default function Home() { return (

Random Sandwich Generator

Click generate to create your perfect sandwich combination!

) } [V0_FILE]typescriptreact:file="components/sandwich-generator.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Lock, Unlock, RefreshCw } from "lucide-react" // Ingredient options for each category const BREADS = [ "White Bread", "Whole Wheat", "Sourdough", "Rye", "Ciabatta", "Baguette", "Brioche", "Multigrain", "Focaccia", "Pita", ] const MEATS = [ "Turkey", "Ham", "Roast Beef", "Chicken", "Salami", "Pastrami", "Bacon", "Prosciutto", "Tuna", "Meatballs", ] const CHEESES = [ "Cheddar", "Swiss", "Provolone", "American", "Pepper Jack", "Mozzarella", "Brie", "Gouda", "Blue Cheese", "Feta", ] const VEGETABLES = [ "Lettuce", "Tomato", "Onion", "Cucumber", "Spinach", "Bell Pepper", "Avocado", "Pickles", "Olives", "Sprouts", ] const SAUCES = [ "Mayo", "Mustard", "Ketchup", "Ranch", "Pesto", "Hummus", "Hot Sauce", "BBQ Sauce", "Aioli", "Vinaigrette", ] type IngredientCategory = { name: string options: string[] current: string locked: boolean animating: boolean } export default function SandwichGenerator() { const [isGenerating, setIsGenerating] = useState(false) const [categories, setCategories] = useState([ { name: "Bread", options: BREADS, current: BREADS[0], locked: false, animating: false }, { name: "Meat", options: MEATS, current: MEATS[0], locked: false, animating: false }, { name: "Cheese", options: CHEESES, current: CHEESES[0], locked: false, animating: false }, { name: "Vegetable", options: VEGETABLES, current: VEGETABLES[0], locked: false, animating: false }, { name: "Sauce", options: SAUCES, current: SAUCES[0], locked: false, animating: false }, ]) const generateSandwich = () => { if (isGenerating) return setIsGenerating(true) // Mark all unlocked categories as animating setCategories((prev) => prev.map((category) => ({ ...category, animating: !category.locked, })), ) // Get unlocked categories const unlockedCategories = categories.filter((category) => !category.locked) // If no unlocked categories, stop immediately if (unlockedCategories.length === 0) { setIsGenerating(false) return } // Track completion for each category let completedAnimations = 0 // Simulate the spinning animation with different durations for each category categories.forEach((category, index) => { if (!category.locked) { // Start the spinning animation const intervalId = setInterval(() => { setCategories((prev) => { const newCategories = [...prev] const randomIndex = Math.floor(Math.random() * category.options.length) newCategories[index].current = category.options[randomIndex] return newCategories }) }, 100) // Calculate a duration between 1000-3000ms based on the category index const duration = 1000 + index * 500 // Stop the animation after the duration setTimeout(() => { clearInterval(intervalId) // Set final random value and mark as not animating setCategories((prev) => { const newCategories = [...prev] const randomIndex = Math.floor(Math.random() * category.options.length) newCategories[index].current = category.options[randomIndex] newCategories[index].animating = false return newCategories }) // Increment completed animations counter completedAnimations++ // Check if all animations are complete if (completedAnimations === unlockedCategories.length) { setIsGenerating(false) } }, duration) } }) } const toggleLock = (index: number) => { if (isGenerating) return setCategories((prev) => { const newCategories = [...prev] newCategories[index].locked = !newCategories[index].locked return newCategories }) } return (

{categories.map((category, index) => (

{category.name}:

{category.current}

))}

{categories.every((c) => c.locked) && (

All ingredients are locked. Unlock some to generate new options!

)}

Your Sandwich

A delicious {categories[0].current} sandwich with {categories[1].current}, {categories[2].current}, fresh{" "} {categories[3].current}, and {categories[4].current}.

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" isEdit="true" 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" 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" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" isEdit="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" isMerged="true" isEdit="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: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", 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))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; --card-foreground: 20 14.3% 4.1%; --popover: 0 0% 100%; --popover-foreground: 20 14.3% 4.1%; --primary: 24 95% 53%; --primary-foreground: 60 9.1% 97.8%; --secondary: 60 4.8% 95.9%; --secondary-foreground: 24 9.8% 10%; --muted: 60 4.8% 95.9%; --muted-foreground: 25 5.3% 44.7%; --accent: 60 4.8% 95.9%; --accent-foreground: 24 9.8% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 60 9.1% 97.8%; --border: 20 5.9% 90%; --input: 20 5.9% 90%; --ring: 24 95% 53%; --radius: 0.75rem; } .dark { --background: 20 14.3% 4.1%; --foreground: 60 9.1% 97.8%; --card: 20 14.3% 4.1%; --card-foreground: 60 9.1% 97.8%; --popover: 20 14.3% 4.1%; --popover-foreground: 60 9.1% 97.8%; --primary: 20.5 90.2% 48.2%; --primary-foreground: 60 9.1% 97.8%; --secondary: 12 6.5% 15.1%; --secondary-foreground: 60 9.1% 97.8%; --muted: 12 6.5% 15.1%; --muted-foreground: 24 5.4% 63.9%; --accent: 12 6.5% 15.1%; --accent-foreground: 60 9.1% 97.8%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 60 9.1% 97.8%; --border: 12 6.5% 15.1%; --input: 12 6.5% 15.1%; --ring: 20.5 90.2% 48.2%; }

About

About