animated-beam-multiple-demo

1import {
2  Database,
3  Layout,
4  Lock,
5  Package,
6  Server,
7  Smartphone,
8} from "lucide-react";
9import React from "react";
10import {
11  AnimatedBeam,
12  BeamContainer,
13  BeamNode,
14} from "@/registry/default/ui/animated-beam";
15 
16export default function AnimatedBeamMultipleDemo() {
17  const containerRef = React.useRef<HTMLDivElement>(null);
18  const clientRef = React.useRef<HTMLDivElement>(null);
19  const gatewayRef = React.useRef<HTMLDivElement>(null);
20  const authRef = React.useRef<HTMLDivElement>(null);
21  const ordersRef = React.useRef<HTMLDivElement>(null);
22  const inventoryRef = React.useRef<HTMLDivElement>(null);
23  const dbRef = React.useRef<HTMLDivElement>(null);
24 
25  return (
26    <BeamContainer
27      ref={containerRef}
28      className="mx-auto flex w-full items-center justify-center gap-12 rounded-xl border bg-background p-10 shadow-sm"
29    >
30      {/* Client Layer */}
31      <div className="flex flex-col items-center gap-2">
32        <BeamNode
33          ref={clientRef}
34          className="h-14 w-14 border-2 border-blue-500/20 bg-blue-500/10"
35        >
36          <Smartphone className="h-6 w-6 text-blue-600" />
37        </BeamNode>
38        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
39          Client
40        </span>
41      </div>
42 
43      {/* Gateway Layer */}
44      <div className="flex flex-col items-center gap-2">
45        <BeamNode
46          ref={gatewayRef}
47          className="h-16 w-16 border-2 border-purple-500/20 bg-purple-500/10"
48        >
49          <Server className="h-8 w-8 text-purple-600" />
50        </BeamNode>
51        <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
52          Gateway
53        </span>
54      </div>
55 
56      {/* Services Layer */}
57      <div className="flex flex-col gap-6">
58        <div className="flex items-center gap-3">
59          <BeamNode
60            ref={authRef}
61            className="h-12 w-12 border-2 border-emerald-500/20 bg-emerald-500/10"
62          >
63            <Lock className="h-5 w-5 text-emerald-600" />
64          </BeamNode>
65          <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
66            Auth
67          </span>
68        </div>
69 
70        <div className="flex items-center gap-3">
71          <BeamNode
72            ref={ordersRef}
73            className="h-12 w-12 border-2 border-amber-500/20 bg-amber-500/10"
74          >
75            <Package className="h-5 w-5 text-amber-600" />
76          </BeamNode>
77// … truncated