| 1 | import { cn } from "~/lib/utils"; |
| 2 | |
| 3 | /** Browser-window thumbnail glyph for preview recommendation cards. */ |
| 4 | export function BrowserMockup({ className }: { className?: string }) { |
| 5 | return ( |
| 6 | <div |
| 7 | aria-hidden |
| 8 | className={cn( |
| 9 | "relative flex flex-col gap-0.5 overflow-hidden rounded-sm border border-border/60 bg-card p-1 shadow-xs/5", |
| 10 | className, |
| 11 | )} |
| 12 | > |
| 13 | <div className="flex gap-0.5"> |
| 14 | <span className="size-[3px] rounded-full bg-destructive/80" /> |
| 15 | <span className="size-[3px] rounded-full bg-warning/80" /> |
| 16 | <span className="size-[3px] rounded-full bg-success/80" /> |
| 17 | </div> |
| 18 | <div className="mt-[1px] flex flex-1 flex-col gap-0.5"> |
| 19 | <span className="h-[2px] w-full rounded-full bg-muted-foreground/30" /> |
| 20 | <span className="h-[2px] w-3/5 rounded-full bg-muted-foreground/20" /> |
| 21 | </div> |
| 22 | </div> |
| 23 | ); |
| 24 | } |