Radial Background

1"use client";
2
3import RadialBackground from '@/components/component-x/radial-background';
4
5export function RadialBackgroundPreview() {
6return (
7  <div className="relative w-full h-full overflow-hidden border flex items-center justify-center">
8    <RadialBackground
9      position="left-center"
10      variant="fade"
11      colorOne="hsl(var(--primary)/0.6)"
12      colorTwo="transparent"
13    />
14    <h3 className="text-2xl text-foreground">Radial Background</h3>
15  </div>
16);
17}
18

1"use client";
2
3import RadialBackground, {
4type RadialPosition,
5} from "@/components/component-x/radial-background";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function RadialBackgroundPositions() {
13const radialPositions: RadialPosition[] = [
14  "top-left",
15  "top-center",
16  "top-right",
17  "left-center",
18  "right-center",
19  "bottom-left",
20  "bottom-center",
21  "bottom-right",
22];
23
24return (
25  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
26    {radialPositions.map((pos) => (
27      <div
28        key={pos}
29        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
30      >
31        <RadialBackground
32          position={pos}
33          variant="fade"
34          colorOne="hsl(var(--primary)/0.6)"
35          colorTwo="transparent"
36          radius={60}
37        />
38        <div className="relative z-10 flex items-center justify-center h-full">
39          <h3 className="text-2xl text-foreground">
40            {pos.split('-').map(capitalizeFirstLetter).join(' ')}
41          </h3>
42        </div>
43      </div>
44    ))}
45  </div>
46);
47}
48

1"use client";
2
3import RadialBackground, {
4type RadialVariant,
5} from "@/components/component-x/radial-background";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function RadialBackgroundVariants() {
13const variants: RadialVariant[] = ["fade", "glow"];
14
15return (
16  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
17    {variants.map((variant) => (
18      <div
19        key={variant}
20        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
21      >
22        <RadialBackground
23          position="left-center"
24          variant={variant}
25          colorOne="hsl(var(--primary)/0.7)"
26          colorTwo="transparent"
27          radius={60}
28        />
29        <div className="relative z-10 flex flex-col items-center justify-center h-full">
30          <h3 className="text-2xl text-foreground">
31            {capitalizeFirstLetter(variant)}
32          </h3>
33          <p className="text-sm text-muted-foreground mt-[1px]">
34            {variant === 'fade'
35              ? 'Smooth gradient fade'
36              : 'Bright glowing effect'}
37          </p>
38        </div>
39      </div>
40    ))}
41  </div>
42);
43}
44

1"use client";
2
3import RadialBackground from '@/components/component-x/radial-background';
4
5export function RadialBackgroundRadius() {
6const radiusSizes = [
7  { label: "Small", value: 30 },
8  { label: "Medium", value: 60 },
9  { label: "Large", value: 100 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {radiusSizes.map(({ label, value }) => (
15      <div
16        key={value}
17        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
18      >
19        <RadialBackground
20          position="left-center"
21          variant="fade"
22          colorOne="hsl(var(--primary)/0.6)"
23          colorTwo="transparent"
24          radius={value}
25        />
26        <div className="relative z-10 flex flex-col items-center justify-center h-full">
27          <h3 className="text-2xl text-foreground">{label}</h3>
28          <p className="text-sm text-muted-foreground mt-[1px]">
29            Radius: {value}%
30          </p>
31        </div>
32      </div>
33    ))}
34  </div>
35);
36}
37

1'use client';
2
3import RadialBackground from '@/components/component-x/radial-background';
4
5export function RadialBackgroundAnimated() {
6return (
7  <div className="relative w-full h-full overflow-hidden border">
8    <RadialBackground
9      position="left-center"
10      variant="glow"
11      colorOne="hsl(var(--primary)/0.8)"
12      colorTwo="transparent"
13      animate={true}
14      radius={60}
15    />
16    <div className="relative z-10 flex flex-col items-center justify-center h-full">
17      <h3 className="text-2xl text-foreground">Animated Radial</h3>
18      <p className="text-muted-foreground mt-[1px]">Pulse animation effect</p>
19    </div>
20  </div>
21);
22}
23