"use client"; import { Lock } from "lucide-react"; import { cn } from "@/lib/utils"; interface Browser28Props { domains?: string[]; className?: string; } export const browser28Demo: Browser28Props = { domains: [ "customer.beste.co", "project.beste.co", "jane.beste.co", "joe.beste.co", ], }; const LAYERS = [ { radius: 8, py: 8, px: 12, barH: 16, fontSize: 12, buttonSize: 8, buttonGap: 4, iconSize: 12.5, }, { radius: 7, py: 6.75, px: 10, barH: 14, fontSize: 9.5, buttonSize: 7, buttonGap: 4, iconSize: 10.5, }, { radius: 6, py: 6, px: 8.75, barH: 12, fontSize: 7.75, buttonSize: 6, buttonGap: 2, iconSize: 9, }, { radius: 5, py: 5, px: 7.5, barH: 10, fontSize: 6, buttonSize: 5, buttonGap: 2, iconSize: 7, }, ]; const TRAFFIC = ["bg-rose-400", "bg-amber-400", "bg-emerald-400"]; export function Browser28({ domains = [], className }: Browser28Props) { const list = domains.slice(0, LAYERS.length); const label = `Stacked browser windows for ${list.join(", ")}`; return (

{list.map((domain, i) => { const l = LAYERS[i]!; return ( ); })}

); }