From a6203b21c71eb3783360ac2bdc8c097b8c8d9a6c Mon Sep 17 00:00:00 2001 From: Melnyk Mykhailo Date: Sun, 21 Jan 2024 13:21:13 +0200 Subject: [PATCH] test shadcn button --- package-lock.json | 44 +++++++++++++++++++-- package.json | 1 + src/components/Pages/Auth/FormAuth.tsx | 5 ++- src/components/UI/button.tsx | 55 ++++++++++++++++++++++++++ 4 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 src/components/UI/button.tsx diff --git a/package-lock.json b/package-lock.json index 6ef2760..f706688 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "golub", "version": "0.0.1", "dependencies": { + "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "lucide-react": "^0.312.0", @@ -861,6 +862,41 @@ "node": ">=14" } }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz", @@ -900,13 +936,13 @@ "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "dev": true + "devOptional": true }, "node_modules/@types/react": { "version": "18.2.39", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz", "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -926,7 +962,7 @@ "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "devOptional": true }, "node_modules/@types/semver": { "version": "7.5.6", @@ -2165,7 +2201,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "devOptional": true }, "node_modules/damerau-levenshtein": { "version": "1.0.8", diff --git a/package.json b/package.json index 8213316..653f974 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "cspell": "cspell --show-suggestions --show-context --gitignore ." }, "dependencies": { + "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "lucide-react": "^0.312.0", diff --git a/src/components/Pages/Auth/FormAuth.tsx b/src/components/Pages/Auth/FormAuth.tsx index ff064ab..56bb23b 100644 --- a/src/components/Pages/Auth/FormAuth.tsx +++ b/src/components/Pages/Auth/FormAuth.tsx @@ -1,11 +1,11 @@ 'use client' +import { Button } from '@/ui/button' import Form from '@/ui/form/Form' import FormCheckbox from '@/ui/form/FormCheckbox' import FormControl from '@/ui/form/FormControl' import FormInput from '@/ui/form/FormInput' import FormLabel from '@/ui/form/FormLabel' -import Button from '@/ui/index/Button' import { FC, FormEvent } from 'react' const AuthForm: FC = () => { @@ -28,6 +28,9 @@ const AuthForm: FC = () => { + {/* */} ) } diff --git a/src/components/UI/button.tsx b/src/components/UI/button.tsx new file mode 100644 index 0000000..f821e7c --- /dev/null +++ b/src/components/UI/button.tsx @@ -0,0 +1,55 @@ +import { cn } from '@/lib/utils' +import { Slot } from '@radix-ui/react-slot' +import { type VariantProps, cva } from 'class-variance-authority' +import * as React from 'react' + +const buttonVariants = cva( + 'inline-block text-center text-base-white rounded-2xl bg-gradient-purple-blue', + { + defaultVariants: { + size: 'default', + variant: 'default', + }, + variants: { + size: { + default: 'py-3.5 px-5', + icon: 'h-10 w-10', + lg: 'h-11 rounded-md px-8', + sm: 'h-9 rounded-md px-3', + }, + variant: { + default: 'bg-gradient-purple-blue', + destructive: + 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', + outline: + 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + secondary: + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + }, + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ asChild = false, className, size, variant, ...props }, ref) => { + const Comp = asChild ? Slot : 'button' + return ( + + ) + } +) +Button.displayName = 'Button' + +export { Button, buttonVariants }