neumorph-button

1"use client"
2 
3import type React from "react"
4import { useState } from "react"
5 
6import NeumorphButton from "../ui/neumorph-button"
7 
8export function NeumorphButtonDemo() {
9  const [loading, setLoading] = useState(false)
10 
11  const handleClick = () => {
12    setLoading(true)
13    setTimeout(() => setLoading(false), 2000)
14  }
15 
16  return (
17    <div className="space-y-8 p-4 ">
18      <div>
19        <h2 className="text-lg font-semibold mb-2">Button Variants</h2>
20        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
21          <NeumorphButton>Default</NeumorphButton>
22          <NeumorphButton intent="primary">Primary</NeumorphButton>
23          <NeumorphButton intent="secondary">Secondary</NeumorphButton>
24          <NeumorphButton intent="danger">Danger</NeumorphButton>
25        </div>
26      </div>
27      <div>
28        <h2 className="text-lg font-semibold mb-2">Button Sizes</h2>
29        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
30          <NeumorphButton size="small">Small</NeumorphButton>
31          <NeumorphButton size="medium">Medium</NeumorphButton>
32          <NeumorphButton size="large">Large</NeumorphButton>
33        </div>
34      </div>
35      <div>
36        <h2 className="text-lg font-semibold mb-2">Full Width Button</h2>
37        <div>
38          <NeumorphButton fullWidth>Full Width</NeumorphButton>
39        </div>
40      </div>
41      <div>
42        <h2 className="text-lg font-semibold mb-2">Disabled Buttons</h2>
43        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
44          <NeumorphButton disabled>Disabled Default</NeumorphButton>
45          <NeumorphButton intent="primary" disabled>
46            Disabled Primary
47          </NeumorphButton>
48          <NeumorphButton intent="secondary" disabled>
49            Disabled Secondary
50          </NeumorphButton>
51          <NeumorphButton intent="danger" disabled>
52            Disabled Danger
53          </NeumorphButton>
54        </div>
55      </div>
56      <div>
57        <h2 className="text-lg font-semibold mb-2">Hover and Active Effects</h2>
58        <p className="text-sm text-gray-600 mb-2">
59          Hover over and click these buttons to see the animations.
60        </p>
61        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
62          <NeumorphButton>Animate Me</NeumorphButton>
63          <NeumorphButton intent="primary">Animate Me</NeumorphButton>
64          <NeumorphButton intent="secondary">Animate Me</NeumorphButton>
65          <NeumorphButton intent="danger">Animate Me</NeumorphButton>
66        </div>
67      </div>
68      <div>
69        <h2 className="text-lg font-semibold mb-2">Loading State</h2>
70        <p className="text-sm text-gray-600 mb-2">
71          Click the button to see the loading animation.
72        </p>
73        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
74          <NeumorphButton
75            intent="primary"
76            loading={loading}
77            onClick={handleClick}
78          >
79            {loading ? "Loading..." : "Click to Load"}
80          </NeumorphButton>
81        </div>
82      </div>
83    </div>
84  )
85}