Moving Border

1"use client";
2
3import MovingBorder from '@/components/component-x/moving-border';
4
5export function MovingBorderPreview() {
6return (
7  <MovingBorder className="rounded">
8    <div className="w-full rounded flex items-center justify-center px-3 py-1">
9      <h3 className="text-foreground">Moving Border</h3>
10    </div>
11  </MovingBorder>
12);
13}
14

1"use client";
2
3import MovingBorder, {
4type MovingBorderSpeed,
5} from "@/components/component-x/moving-border";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function MovingBorderSpeeds() {
13const speeds: MovingBorderSpeed[] = ["slow", "normal", "fast"];
14
15return (
16  <div className="w-full h-full overflow-y-auto flex flex-col items-center justify-center gap-4">
17    <div className="flex flex-col gap-4 w-fit">
18      {speeds.map((speed) => (
19        <MovingBorder key={speed} speed={speed} className="rounded w-full">
20          <div className="rounded flex items-center justify-center px-3 py-1 w-full">
21            <h3 className="text-foreground text-sm">
22              Moving Border{" "}
23              <span className="text-muted-foreground">
24                {capitalizeFirstLetter(speed)}
25              </span>
26            </h3>
27          </div>
28        </MovingBorder>
29      ))}
30    </div>
31  </div>
32);
33}
34

1"use client";
2
3import MovingBorder, {
4type MovingBorderDirection,
5} from "@/components/component-x/moving-border";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function MovingBorderDirections() {
13const directions: MovingBorderDirection[] = ["clockwise", "counterclockwise"];
14
15return (
16  <div className="w-full h-full overflow-y-auto flex items-center justify-center">
17    <div className="flex flex-col gap-4 w-fit">
18      {directions.map((direction) => (
19        <MovingBorder
20          key={direction}
21          direction={direction}
22          className="rounded w-full"
23        >
24          <div className="rounded flex items-center justify-center px-3 py-1 w-full">
25            <h3 className="text-foreground text-sm">
26              Moving Border{' '}
27              <span className="text-muted-foreground">
28                {capitalizeFirstLetter(direction)}
29              </span>
30            </h3>
31          </div>
32        </MovingBorder>
33      ))}
34    </div>
35  </div>
36);
37}
38

1"use client";
2
3import MovingBorder from '@/components/component-x/moving-border';
4
5export function MovingBorderColors() {
6const colors = [
7  { label: "Primary", value: "hsl(var(--primary))" },
8  { label: "Destructive", value: "hsl(var(--destructive))" },
9  { label: "Success", value: "hsl(142, 71%, 45%)" },
10  { label: "Warning", value: "hsl(38, 92%, 50%)" },
11];
12
13return (
14  <div className="w-full h-full overflow-y-auto flex items-center justify-center">
15    <div className="flex flex-col gap-4 w-fit">
16      {colors.map(({ label, value }) => (
17        <MovingBorder key={label} color={value} className="rounded w-full">
18          <div className="rounded flex items-center justify-center px-3 py-1 w-full">
19            <h3 className="text-foreground text-sm">
20              Moving Border <span className="text-muted-foreground">{label}</span>
21            </h3>
22          </div>
23        </MovingBorder>
24      ))}
25    </div>
26  </div>
27);
28}
29

1"use client";
2
3import MovingBorder from "@/components/component-x/moving-border";
4
5export function MovingBorderEffects() {
6const effects = [
7  { label: "No Blur", blur: 0, opacity: 1 },
8  { label: "Light Blur", blur: 4, opacity: 0.8 },
9  { label: "Medium Blur", blur: 8, opacity: 0.6 },
10  { label: "Heavy Blur", blur: 16, opacity: 0.4 },
11];
12
13return (
14  <div className="w-full h-full overflow-y-auto flex items-center justify-center">
15    <div className="flex flex-col gap-4 w-fit">
16      {effects.map((effect) => (
17        <MovingBorder
18          key={effect.label}
19          blur={effect.blur}
20          opacity={effect.opacity}
21          className="rounded w-full"
22        >
23          <div className="rounded flex items-center justify-center px-3 py-1 w-full">
24            <h3 className="text-foreground text-sm">
25              Moving Border{" "}
26              <span className="text-muted-foreground">{effect.label}</span>
27            </h3>
28          </div>
29        </MovingBorder>
30      ))}
31    </div>
32  </div>
33);
34}
35

1"use client";
2
3import MovingBorder from '@/components/component-x/moving-border';
4
5const durations = [
6{ label: "1s", value: 1 },
7{ label: "3s", value: 3 },
8{ label: "6s", value: 6 },
9{ label: "10s", value: 10 },
10];
11
12export function MovingBorderDuration() {
13return (
14  <div className="w-full h-full overflow-y-auto flex items-center justify-center">
15    <div className="flex flex-col gap-4 w-fit">
16      {durations.map(({ label, value }) => (
17        <MovingBorder key={label} duration={value} className="rounded w-full">
18          <div className="rounded flex items-center justify-center px-3 py-1 w-full">
19            <h3 className="text-foreground text-sm">
20              Moving Border <span className="text-muted-foreground">{label}</span>
21            </h3>
22          </div>
23        </MovingBorder>
24      ))}
25    </div>
26  </div>
27);
28}
29