96:I[903690,["/chat-static/_next/static/immutable/chunks/235ilbjx1v5rr.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/2ouk4tom1nexn.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ufyz6yxs0z2e.js","/chat-static/_next/static/immutable/chunks/2dh4piq3ytqcg.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/10izshhicf9v3.js","/chat-static/_next/static/immutable/chunks/3onevyvova1-x.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/01gpvx93c-t3d.js","/chat-static/_next/static/immutable/chunks/0_zojv1j0yvgz.js","/chat-static/_next/static/immutable/chunks/3o68x5y6o8416.js","/chat-static/_next/static/immutable/chunks/2nhia_dkrl056.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/1v_c1vjp0rw0g.js","/chat-static/_next/static/immutable/chunks/04l72d75eqpuv.js","/chat-static/_next/static/immutable/chunks/28paj9r0h0i-2.js","/chat-static/_next/static/immutable/chunks/2ywng_8quoijj.js","/chat-static/_next/static/immutable/chunks/12d5j17gf9uq9.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/38rxvf12fo5i-.js","/chat-static/_next/static/immutable/chunks/2rl_28388m3mk.js","/chat-static/_next/static/immutable/chunks/1wvxyir86wylu.js","/chat-static/_next/static/immutable/chunks/10v7ydpea6nr6.js","/chat-static/_next/static/immutable/chunks/1is3hm0odzhii.js","/chat-static/_next/static/immutable/chunks/25uu6v5p6vk2a.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/25ir67cmidpa6.js","/chat-static/_next/static/immutable/chunks/1gg_evu9clf7g.js","/chat-static/_next/static/immutable/chunks/3_8tbjvw9irzt.js"],"ExplicitChatIdProvider"] 97:I[838238,["/chat-static/_next/static/immutable/chunks/235ilbjx1v5rr.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0_zevym5bobxk.js","/chat-static/_next/static/immutable/chunks/2ouk4tom1nexn.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ufyz6yxs0z2e.js","/chat-static/_next/static/immutable/chunks/2dh4piq3ytqcg.js","/chat-static/_next/static/immutable/chunks/421be_5xz_yit.js","/chat-static/_next/static/immutable/chunks/10izshhicf9v3.js","/chat-static/_next/static/immutable/chunks/3onevyvova1-x.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/01gpvx93c-t3d.js","/chat-static/_next/static/immutable/chunks/0_zojv1j0yvgz.js","/chat-static/_next/static/immutable/chunks/3o68x5y6o8416.js","/chat-static/_next/static/immutable/chunks/2nhia_dkrl056.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/1v_c1vjp0rw0g.js","/chat-static/_next/static/immutable/chunks/04l72d75eqpuv.js","/chat-static/_next/static/immutable/chunks/28paj9r0h0i-2.js","/chat-static/_next/static/immutable/chunks/2ywng_8quoijj.js","/chat-static/_next/static/immutable/chunks/12d5j17gf9uq9.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/38rxvf12fo5i-.js","/chat-static/_next/static/immutable/chunks/2rl_28388m3mk.js","/chat-static/_next/static/immutable/chunks/1wvxyir86wylu.js","/chat-static/_next/static/immutable/chunks/10v7ydpea6nr6.js","/chat-static/_next/static/immutable/chunks/1is3hm0odzhii.js","/chat-static/_next/static/immutable/chunks/25uu6v5p6vk2a.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/25ir67cmidpa6.js","/chat-static/_next/static/immutable/chunks/1gg_evu9clf7g.js","/chat-static/_next/static/immutable/chunks/3_8tbjvw9irzt.js"],"SWRDataProvider"] 98:T15af,[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { LEDDemo } from "@/led-indicator" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="led-indicator.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { cn } from "@/lib/utils" type Status = "online" | "offline" | "away" | "busy" interface LEDIndicatorProps { status?: Status size?: "sm" | "md" | "lg" pulse?: boolean className?: string } export default function LEDIndicator({ status = "offline", size = "md", pulse = true, className }: LEDIndicatorProps) { const [isOnline, setIsOnline] = useState(status === "online") // Demo toggle for preview purposes useEffect(() => { setIsOnline(status === "online") }, [status]) const sizeClasses = { sm: "w-2 h-2", md: "w-3 h-3", lg: "w-4 h-4", } const statusColors = { online: { core: "bg-green-500", inner: "bg-green-400", outer: "bg-green-500", }, offline: { core: "bg-gray-400", inner: "bg-gray-300", outer: "bg-gray-400", }, away: { core: "bg-amber-500", inner: "bg-amber-400", outer: "bg-amber-500", }, busy: { core: "bg-red-500", inner: "bg-red-400", outer: "bg-red-500", }, } return (

{/* Outer glow - largest and most diffused */}

{/* Middle glow layer */}

{/* Inner glow - closer to the LED */}

{/* The LED itself */}

{/* Bright center core of the LED */}

{/* Glass highlight effect */}

) } // Demo component to showcase the LED indicator export function LEDDemo() { const [status, setStatus] = useState("online") const toggleStatus = () => { const statuses: Status[] = ["online", "offline", "away", "busy"] const currentIndex = statuses.indexOf(status) const nextIndex = (currentIndex + 1) % statuses.length setStatus(statuses[nextIndex]) } return (

{status}

Small

Medium

Large

Online

Offline

Away

Busy

) } 8e:["$","$L96",null,{"chatId":"I1r2rgvZPh9","children":["$","$L97",null,{"data":{"@\"active-block\",\"I1r2rgvZPh9\",":{"id":"b_SHYL74t3W6p","messageId":"URVwfwV1RWILmCQ3J9mU4E5X4TGPNYMx","source":"$98","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"led-indicator","type":"code-project","project":"led-indicator"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"I1r2rgvZPh9\",":false},"children":"$L99"}]}]

About

Tags

Share

About

Tags

Share

More from marcodenic

More Templates Like This