texture-button

1"use client"
2 
3import { ChevronLeft, Trash, X } from "lucide-react"
4 
5import { TextureButton } from "@/components/ui/texture-button"
6 
7export function TextureButtonDemo() {
8  return (
9    <div className="dark:bg-stone-950  py-6 px-4 md:px-0 rounded-md flex justify-center">
10      <div>
11        <div className="flex flex-col gap-3 max-w-lg mt-4">
12          <div className="flex gap-3">
13            <div>
14              <TextureButton size="sm">Primary</TextureButton>
15            </div>
16            <div className="">
17              <TextureButton>Primary</TextureButton>
18            </div>
19            <div className="md:w-36 hidden">
20              <TextureButton size="lg">Primary</TextureButton>
21            </div>
22          </div>
23        </div>
24        <div className="flex flex-col gap-3 max-w-lg mt-4">
25          <div className="flex gap-3">
26            <div>
27              <TextureButton variant="accent" size="sm">
28                Accent
29              </TextureButton>
30            </div>
31            <div className="">
32              <TextureButton variant="accent">Accent</TextureButton>
33            </div>
34            <div className="md:w-36 hidden">
35              <TextureButton variant="accent" size="lg">
36                Accent
37              </TextureButton>
38            </div>
39          </div>
40        </div>
41        <div className="flex flex-col gap-3 max-w-lg mt-4">
42          <div className="flex gap-3 w-full">
43            <div className="">
44              <TextureButton variant="secondary" size="sm">
45                Secondary
46              </TextureButton>
47            </div>
48            <div className="">
49              <TextureButton variant="secondary">Secondary</TextureButton>
50            </div>
51            <div className="hidden md:w-48">
52              <TextureButton variant="secondary" size="lg">
53                Secondary
54              </TextureButton>
55            </div>
56          </div>
57        </div>
58        <div className="flex flex-col gap-3 max-w-lg mt-4">
59          <div className="flex gap-3 w-full">
60            <div className="">
61              <TextureButton variant="destructive" size="sm">
62                Destructive
63              </TextureButton>
64            </div>
65            <div className="">
66              <TextureButton variant="destructive">Destructive</TextureButton>
67            </div>
68            <div className="hidden md:w-48">
69              <TextureButton variant="destructive" size="lg">
70                Destructive
71              </TextureButton>
72            </div>
73          </div>
74        </div>
75        <div className="flex flex-col gap-3 max-w-lg mt-4">
76          <div className="flex gap-3 w-full">
77            <div className="">
78              <TextureButton variant="minimal" size="sm">
79                Minimal
80              </TextureButton>
81            </div>
82            <div className="">
83              <TextureButton variant="minimal">Minimal</TextureButton>
84            </div>
85            <div className="hidden md:w-48">
86              <TextureButton variant="minimal" size="lg">
87                Minimal
88              </TextureButton>
89            </div>
90          </div>
91        </div>
92        <div className="flex flex-col gap-3 max-w-xs mt-4">
93          <div className="flex gap-3">
94            <TextureButton variant="icon" size="icon">
95              <ChevronLeft className="h-6 w-6 p-1" />
96            </TextureButton>
97 
98            <TextureButton variant="icon" size="icon">
99              <Trash className="h-5 w-6 p-1" />
100            </TextureButton>
101 
102            <TextureButton variant="icon" size="icon">
103              <X className="h-6 w-6 p-1" />
104            </TextureButton>
105          </div>
106        </div>
107      </div>
108    </div>
109  )
110}