[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="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 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" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Shuffle } from "lucide-react" import { Button } from "@/components/ui/button" const emojis = ["😀", "😍", "🚀", "🌈", "🍕", "🎸", "🐶", "🌺"] export default function EmojiMemoryMatch() { const [cards, setCards] = useState([]) const [flippedIndices, setFlippedIndices] = useState([]) const [matchedPairs, setMatchedPairs] = useState([]) const [moves, setMoves] = useState(0) const [isWon, setIsWon] = useState(false) useEffect(() => { shuffleCards() }, []) useEffect(() => { if (matchedPairs.length === emojis.length) { setIsWon(true) } }, [matchedPairs]) const shuffleCards = () => { const shuffled = [...emojis, ...emojis].sort(() => Math.random() - 0.5) setCards(shuffled) setFlippedIndices([]) setMatchedPairs([]) setMoves(0) setIsWon(false) } const handleCardClick = (index: number) => { if (flippedIndices.length === 2 || flippedIndices.includes(index) || matchedPairs.includes(index)) return const newFlippedIndices = [...flippedIndices, index] setFlippedIndices(newFlippedIndices) if (newFlippedIndices.length === 2) { setMoves((prev) => prev + 1) if (cards[newFlippedIndices[0]] === cards[newFlippedIndices[1]]) { setMatchedPairs((prev) => [...prev, ...newFlippedIndices]) setFlippedIndices([]) } else { setTimeout(() => setFlippedIndices([]), 1000) } } } return (

Emoji Memory Match

{cards.map((emoji, index) => ( handleCardClick(index)} /> ))}

Moves: {moves}

{isWon && }

) } function Card({ emoji, isFlipped, onClick }: { emoji: string; isFlipped: boolean; onClick: () => void }) { return (

{isFlipped ? emoji : "?"}

) } function WinningScreen({ moves, onRestart }: { moves: number; onRestart: () => void }) { return (

Congratulations!

You won in {moves} moves!

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isEdit="true" isQuickEdit="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))", }, //Existing colors are preserved below. Consider refactoring to use hsl vars if desired. FF6B6B: "#FF6B6B", }, 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")], }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This