[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --popover: #ffffff; --popover-foreground: #0a0a0a; --primary: #737373; --primary-foreground: #fafafa; --secondary: #f5f5f5; --secondary-foreground: #171717; --muted: #f5f5f5; --muted-foreground: #717171; --accent: #f5f5f5; --accent-foreground: #171717; --destructive: #e7000b; --destructive-foreground: #f5f5f5; --border: #e5e5e5; --input: #e5e5e5; --ring: #a1a1a1; --chart-1: #737373; --chart-2: #737373; --chart-3: #737373; --chart-4: #737373; --chart-5: #737373; --radius: 0rem; --sidebar: #fafafa; --sidebar-foreground: #0a0a0a; --sidebar-primary: #171717; --sidebar-primary-foreground: #fafafa; --sidebar-accent: #f5f5f5; --sidebar-accent-foreground: #171717; --sidebar-border: #e5e5e5; --sidebar-ring: #a1a1a1; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.05; --shadow-color: #000000; } .dark { --background: #0a0a0a; --foreground: #fafafa; --card: #191919; --card-foreground: #fafafa; --popover: #262626; --popover-foreground: #fafafa; --primary: #737373; --primary-foreground: #fafafa; --secondary: #262626; --secondary-foreground: #fafafa; --muted: #262626; --muted-foreground: #a1a1a1; --accent: #404040; --accent-foreground: #fafafa; --destructive: #ff6467; --destructive-foreground: #262626; --border: #383838; --input: #525252; --ring: #737373; --chart-1: #737373; --chart-2: #737373; --chart-3: #737373; --chart-4: #737373; --chart-5: #737373; --sidebar: #171717; --sidebar-foreground: #fafafa; --sidebar-primary: #fafafa; --sidebar-primary-foreground: #171717; --sidebar-accent: #262626; --sidebar-accent-foreground: #fafafa; --sidebar-border: #ffffff; --sidebar-ring: #525252; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.05; --shadow-color: #000000; } @theme inline { --font-sans: 'Geist Mono', 'Geist Mono Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-serif: 'Geist Mono', 'Geist Mono Fallback'; /* computed shadow variables below - do not modify */ --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent); --shadow: var(--shadow-md); --color-shadow-color: var(--shadow-color); --shadow-opacity: var(--shadow-opacity); --shadow-spread: var(--shadow-spread); --shadow-blur: var(--shadow-blur); --shadow-y: var(--shadow-y); --shadow-x: var(--shadow-x); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Analytics } from '@vercel/analytics/next' import './globals.css' import { Geist_Mono, Geist_Mono as V0_Font_Geist_Mono } from 'next/font/google' // Initialize fonts const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { SlideToggle } from "@/components/animated-toggles" type ToggleValue = "preview" | "code" export default function Home() { const [slide, setSlide] = useState("preview") return (

) } [V0_FILE]typescriptreact:file="components/animated-toggles.tsx" isEdit="true" isQuickEdit="true" "use client" import { motion } from "framer-motion" type ToggleValue = "preview" | "code" interface ToggleProps { value: ToggleValue onChange: (value: ToggleValue) => void } const EyeIcon = () => ( ) const CodeIcon = () => ( ) // Toggle 1: Slide - Indicador deslizante con spring export function SlideToggle({ value, onChange }: ToggleProps) { const handleToggleClick = () => { onChange(value === "preview" ? "code" : "preview") } return (

{/* Border container */}

{/* Buttons con íconos siempre grises */}

) } // Toggle 2: Scale - Efecto de escala con rebote export function ScaleToggle({ value, onChange }: ToggleProps) { return (

{/* Active background */} onChange("preview")} className="relative z-10 w-7 flex items-center justify-center cursor-pointer" whileTap={{ scale: 0.92 }} > onChange("code")} className="relative z-10 w-7 flex items-center justify-center cursor-pointer" whileTap={{ scale: 0.92 }} >

) } // Toggle 3: Fade - Transición suave de opacidad export function FadeToggle({ value, onChange }: ToggleProps) { return (

{/* Fade background for preview */} {/* Fade background for code */}

) } // Toggle 4: Glow - Slide con efecto de brillo export function GlowToggle({ value, onChange }: ToggleProps) { return (

{/* Glow indicator */}

) }

About

Tags

Share

About

Tags

Share

More from ponceain

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ponceain

More Templates Like This