ES/Task#6/feat:create_button_component

package.json

@@ -9,15 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
-    "next": "13.5.6"
+    "tailwind-variants": "^0.1.18"
   },
   "devDependencies": {
     "autoprefixer": "^10",
-    "postcss": "^8",
-    "tailwindcss": "^3",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "13.5.6",
+    "postcss": "^8",
+    "tailwindcss": "^3"
   }
 }

src/app/page.js

@@ -1,9 +1,17 @@
-import Image from 'next/image'
+import SolidButton from '@/components/Buttons/SolidButton';
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center justify-between min-h-screen p-24">
+    <main className='flex flex-col items-center justify-between min-h-screen p-24'>
       <div>Olá, mundo!</div>
+      <br />
+      <SolidButton>texto do SolidButton</SolidButton>
+      <SolidButton color='secondary' size='md'>
+        texto do SolidButton
+      </SolidButton>
+      <SolidButton color='danger' size='lg'>
+        texto do SolidButton
+      </SolidButton>
     </main>
-  )
+  );
 }

src/components/Button.js

@@ -0,0 +1,86 @@
+import { tv } from 'tailwind-variants';
+
+const button = tv({
+  base: [
+    'cursor-pointer',
+    'font-medium',
+    'gap-2',
+    'rounded-lg',
+    'text-center',
+    'transition-all',
+    'active:outline',
+    'active:outline-2',
+    'active:outline-current',
+    'active:outline-offset-2',
+  ],
+  variants: {
+    type: {
+      solid: [
+        'bg-blue-700',
+        'text-white',
+        'hover:bg-blue-800',
+        'dark:bg-blue-600',
+        'dark:hover:bg-blue-700',
+      ],
+      outline: [
+        'border-2',
+        'border-blue-700',
+        'text-blue-700',
+        'hover:text-white',
+        'hover:bg-blue-800',
+        'dark:border-blue-500',
+        'dark:text-blue-500',
+        'dark:hover:bg-blue-500',
+      ],
+    },
+    size: {
+      small: ['px-4', 'py-2.5', 'text-sm'],
+      medium: ['px-5', 'py-3', 'text-md'],
+      large: ['px-6', 'py-4', 'text-lg'],
+    },
+    full: {
+      true: 'w-full',
+    },
+    disabled: {
+      true: 'cursor-not-allowed',
+    },
+  },
+  defaultVariants: {
+    type: 'solid',
+    size: 'small',
+  },
+});
+
+export default function Button({
+  type = '',
+  size = '',
+  className = '',
+  full = false,
+  disabled = false,
+  children,
+}) {
+  return (
+    <a className={button({ type, size, className, full, disabled })}>{children}</a>
+  );
+}
+
+// #################################
+// Alternativa ao código acima
+
+// function ButtonSolid({ children }) {
+//   return <a className={button()}>{children}</a>;
+// }
+
+// function ButtonOutline({ children }) {
+//   return <a className={''}>{children}</a>;
+// }
+
+// function ButtonSoft({ children }) {
+//   return <a className={''}>{children}</a>;
+// }
+
+// export default {
+//   solid: ButtonSolid,
+//   outline: ButtonOutline,
+//   soft: ButtonSoft,
+// }

src/components/Buttons/OutlineButton.js

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import { tv } from 'tailwind-variants';
+
+import baseButton from './baseButton';
+
+// TODO: próximo item a ser feito
+
+const outlineButton = tv({
+  extend: baseButton,
+  variants: {
+    color: {
+      primary: '',
+    },
+  },
+});
+
+export default function OutlineButton({
+  href = '',
+  color = '',
+  size = '',
+  full,
+  children,
+}) {
+  return (
+    <Link href={href} className={outlineButton({ color, size, full })}>
+      {children}
+    </Link>
+  );
+}

src/components/Buttons/SolidButton.js

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import { tv } from 'tailwind-variants';
+
+import baseButton from './baseButton';
+
+const solidButton = tv({
+  extend: baseButton,
+  variants: {
+    color: {
+      primary:
+        'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700',
+      secondary:
+        'text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700',
+      danger:
+        'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700',
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+  },
+});
+
+export default function SolidButton({
+  href = '',
+  color = '',
+  size = '',
+  full,
+  children,
+}) {
+  return (
+    <Link href={href} className={solidButton({ color, size, full })}>
+      {children}
+    </Link>
+  );
+}

src/components/Buttons/baseButton.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+const baseButton = tv({
+  base: [
+    'font-medium',
+    'tracking-wide',
+    'rounded-md',
+    'text-center',
+    'transition',
+    'duration-400',
+    'ease-in-out',
+    'active:outline',
+    'active:outline-2',
+    'active:outline-current',
+    'active:outline-offset-2',
+  ],
+  variants: {
+    size: {
+      sm: 'px-3 py-2 text-sm',
+      md: 'px-5 py-2.5 text-base',
+      lg: 'px-6 py-3 text-lg',
+    },
+    full: {
+      true: 'w-full',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+export default baseButton;