[V0_FILE]typescriptreact:file="bus-route-timeline.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { ChevronDown, ChevronUp, Info } from "lucide-react" type BusStop = { id: string name: string time: string type: "origin" | "destination" | "connection" | "regular" | "hidden" label?: string isADO?: boolean } export default function BusRouteTimeline() { const [expandedStops, setExpandedStops] = useState(false) const busStops: BusStop[] = [ { id: "stop1", name: "Zócalo de Acapulco", time: "07:30 h", type: "connection", label: "Recolección Conecta", isADO: true, }, { id: "stop2", name: "Acapulco Costera, Gro.", time: "09:00 h", type: "origin", label: "Terminal origen", }, { id: "stop3", name: "Chilpancingo de Bravo", time: "", type: "hidden", }, { id: "stop4", name: "Cuernavaca", time: "", type: "hidden", }, { id: "stop5", name: "Central México Norte, CDMX", time: "14:10 h", type: "destination", label: "Terminal destino", }, { id: "stop6", name: "Central México Norte, CDMX", time: "14:30 h", type: "connection", label: "Recolección Conecta", isADO: true, }, { id: "stop7", name: "Ángel de la Independencia", time: "15:30 h", type: "connection", label: "Descenso Conecta", }, ] const hiddenStops = busStops.filter((stop) => stop.type === "hidden") const visibleStops = busStops.filter((stop) => stop.type !== "hidden") return (

Detalle de ruta

Viaje local

{/* Timeline line */}

{/* Bus stops */}

{visibleStops.map((stop, index) => { // Find the index where hidden stops should be inserted const shouldShowCollapsible = index === 2 && hiddenStops.length > 0 && !expandedStops // Find the index where hidden stops should be displayed when expanded const shouldInsertHiddenStops = index === 2 && hiddenStops.length > 0 && expandedStops return (

{/* Bus icon and dot */}

{stop.isADO && (

ADO

)}

{/* Stop details */}

{stop.label &&

{stop.label}

}

{stop.name}

{/* Time */}

{stop.time}

{/* Collapsible section for hidden stops */} {shouldShowCollapsible && (

setExpandedStops(true)} > {hiddenStops.length} paradas

)} {/* Display hidden stops when expanded */} {shouldInsertHiddenStops && ( <>

5 h 10 min. Aprox.

{hiddenStops.map((hiddenStop) => (

{hiddenStop.name}

{hiddenStop.time}

))}

setExpandedStops(false)} > Ocultar paradas

)}

) })}

{/* Dotted line at the end */}

) } [V0_FILE]typescriptreact:file="components/bus-route-timeline.tsx" "use client" import { useState } from "react" import { ChevronDown, ChevronUp, Info } from "lucide-react" type BusStop = { id: string name: string time: string type: "origin" | "destination" | "connection" | "regular" | "hidden" label?: string isADO?: boolean } export default function BusRouteTimeline() { const [expandedStops, setExpandedStops] = useState(false) const busStops: BusStop[] = [ { id: "stop1", name: "Zócalo de Acapulco", time: "07:30 h", type: "connection", label: "Recolección Conecta", isADO: true, }, { id: "stop2", name: "Acapulco Costera, Gro.", time: "09:00 h", type: "origin", label: "Terminal origen", }, { id: "stop3", name: "Chilpancingo de Bravo", time: "", type: "hidden", }, { id: "stop4", name: "Cuernavaca", time: "", type: "hidden", }, { id: "stop5", name: "Central México Norte, CDMX", time: "14:10 h", type: "destination", label: "Terminal destino", }, { id: "stop6", name: "Central México Norte, CDMX", time: "14:30 h", type: "connection", label: "Recolección Conecta", isADO: true, }, { id: "stop7", name: "Ángel de la Independencia", time: "15:30 h", type: "connection", label: "Descenso Conecta", }, ] const hiddenStops = busStops.filter((stop) => stop.type === "hidden") const visibleStops = busStops.filter((stop) => stop.type !== "hidden") return (

Detalle de ruta

Viaje local

{/* Timeline line */}

{/* Bus stops */}

{/* Bus icon and dot */}

{stop.isADO && (

ADO

)}

{/* Stop details */}

{stop.label &&

{stop.label}

}

{stop.name}

{/* Time */}

{stop.time}

{/* Collapsible section for hidden stops */} {shouldShowCollapsible && (

setExpandedStops(true)} > {hiddenStops.length} paradas

)} {/* Display hidden stops when expanded */} {shouldInsertHiddenStops && ( <>

5 h 10 min. Aprox.

{hiddenStops.map((hiddenStop) => (

{hiddenStop.name}

{hiddenStop.time}

))}

setExpandedStops(false)} > Ocultar paradas

)}

) })}

{/* Dotted line at the end */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import BusRouteTimeline from "@/components/bus-route-timeline" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { purple: { 500: "#a855f7", }, teal: { 500: "#14b8a6", }, background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, 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: [], } export default config [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Bus Route Timeline", description: "A timeline showing bus stops between source and destination", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }