Magnetic Container

1"use client";
2
3import { Button } from "@/components/ui/button";
4import { MagneticContainer } from "@/registry/ui";
5import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
6
7export function MagneticContainerDefaultExample({
8  strength,
9  maxOffset,
10}: {
11  strength: number;
12  maxOffset: number;
13}) {
14  return (
15    <div className="w-full grid grid-cols-2 gap-4 bg-muted/50">
16      <div className="flex justify-center items-center">
17        <MagneticContainer className="inline-block p-8 bg-muted/50 rounded-lg border border-border">
18          <Button size="lg">Hover me!</Button>
19        </MagneticContainer>
20      </div>
21      <div className="flex justify-center items-center">
22        <MagneticContainer
23          className="inline-block p-12 bg-muted/50 rounded-lg border border-border"
24          strength={strength}
25          maxOffset={maxOffset}
26        >
27          <Card className="w-64">
28            <CardHeader>
29              <CardTitle>Magnetic Card</CardTitle>
30            </CardHeader>
31            <CardContent>
32              <p className="text-sm text-muted-foreground">
33                This card follows your cursor with increased strength.
34              </p>
35            </CardContent>
36          </Card>
37        </MagneticContainer>
38      </div>
39      <div className="flex justify-center items-center">
40        <MagneticContainer
41          className="p-12 bg-muted/50 rounded-lg border border-border"
42          strength={strength}
43          maxOffset={maxOffset}
44        >
45          <div className="flex flex-wrap gap-4 justify-center">
46            <Button variant="default">Primary</Button>
47            <Button variant="secondary">Secondary</Button>
48            <Button variant="outline">Outline</Button>
49            <Button variant="destructive">Danger</Button>
50            <Button variant="ghost">Ghost</Button>
51          </div>
52        </MagneticContainer>
53      </div>
54      <div className="flex justify-center items-center">
55        <MagneticContainer
56          className="p-16 bg-linear-to-br from-muted/30 to-muted/60 rounded-xl border border-border"
57          strength={strength}
58          maxOffset={maxOffset}
59        >
60          <div className="text-center space-y-6">
61            <div className="w-20 h-20 mx-auto rounded-full bg-primary flex items-center justify-center">
62              <span className="text-3xl text-primary-foreground font-bold">
63                M
64              </span>
65            </div>
66            <div className="space-y-2">
67              <h3 className="text-2xl font-bold text-foreground">
68                Magnetic Effect
69              </h3>
70              <p className="text-muted-foreground max-w-md mx-auto">
71                Move your cursor around this large container to see the subtle
72                magnetic attraction effect.
73              </p>
74            </div>
75            <div className="flex gap-3 justify-center">
76              <Button>Get Started</Button>
77              <Button variant="outline">Learn More</Button>
78            </div>
79          </div>
80        </MagneticContainer>
81      </div>
82    </div>
83  );
84}