Grid Background

1"use client";
2
3import GridBackground from '@/components/component-x/grid-background';
4
5export function GridBackgroundPreview() {
6return (
7  <div className="relative w-full h-full overflow-hidden border flex items-center justify-center">
8    <GridBackground
9      gridDimension="48"
10      gridColor="#161616"
11      backgroundColor="bg-background"
12      gridOpacity={1}
13      lineWidth={1}
14    />
15    <h3 className="text-2xl text-foreground">Grid Background</h3>
16  </div>
17);
18}
19

1"use client";
2
3import GridBackground from '@/components/component-x/grid-background';
4
5export function GridBackgroundDimensions() {
6const dimensions = [
7  { label: "Small", value: "24" },
8  { label: "Medium", value: "48" },
9  { label: "Large", value: "96" },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {dimensions.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        <GridBackground
20          gridDimension={value}
21          gridColor="#161616"
22          backgroundColor="bg-background"
23          gridOpacity={0.8}
24          lineWidth={1}
25        />
26        <div className="relative z-10 flex flex-col items-center justify-center h-full">
27          <h3 className="text-2xl text-foreground">
28            {label} <span className="text-muted-foreground">{value}px</span>
29          </h3>
30        </div>
31      </div>
32    ))}
33  </div>
34);
35}
36

1"use client";
2
3import GridBackground from '@/components/component-x/grid-background';
4
5export function GridBackgroundOpacity() {
6const opacities = [
7  { label: "Subtle", value: 0.3 },
8  { label: "Medium", value: 0.6 },
9  { label: "Strong", value: 1 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {opacities.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        <GridBackground
20          gridDimension="48"
21          gridColor="#161616"
22          backgroundColor="bg-background"
23          gridOpacity={value}
24          lineWidth={1}
25        />
26        <div className="relative z-10 flex flex-col items-center justify-center h-full">
27          <h3 className="text-2xl text-foreground">
28            {label}{" "}
29            <span className="text-muted-foreground">
30              {(value * 100).toFixed(0)}%
31            </span>
32          </h3>
33        </div>
34      </div>
35    ))}
36  </div>
37);
38}
39

1"use client";
2
3import GridBackground from '@/components/component-x/grid-background';
4
5export function GridBackgroundLineWidths() {
6const lineWidths = [
7  { label: "Thin", value: 1 },
8  { label: "Medium", value: 2 },
9  { label: "Thick", value: 3 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {lineWidths.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        <GridBackground
20          gridDimension="48"
21          gridColor="#161616"
22          backgroundColor="bg-background"
23          gridOpacity={1}
24          lineWidth={value}
25        />
26        <div className="relative z-10 flex flex-col items-center justify-center h-full">
27          <h3 className="text-2xl text-foreground">
28            {label} <span className="text-muted-foreground">{value}px</span>
29          </h3>
30        </div>
31      </div>
32    ))}
33  </div>
34);
35}
36