feat: Implement custom button

src/app/elements/page.tsx

@@ -1,3 +1,8 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+
+import { CustomButton } from '@/components/Buttons/CustomButton';
 import { Chart } from '@/components/Charts/Chart';
 import container from '@/container';
 import CountryRepository from '@/domain/repositories/CountryRepository';
@@ -7,5 +12,19 @@ import CountryRepository from '@/domain/repositories/CountryRepository';
  */
 export default async function Elements() {
   const countryData = await container.resolve<CountryRepository>('CountryRepository').getCountryData(50);
-  return <Chart chartData={countryData.fcsGraph} />;
+  const { theme, setTheme } = useTheme();
+  return (
+    <div>
+      <Chart chartData={countryData.fcsGraph} />;
+      <CustomButton variant="solid" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+        Change Theme
+      </CustomButton>
+      <CustomButton variant="bordered" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+        Change Theme
+      </CustomButton>
+      <CustomButton variant="flat" onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+        Change Theme
+      </CustomButton>
+    </div>
+  );
 }

src/components/Buttons/CustomButton.tsx

@@ -0,0 +1,30 @@
+import { Button, ButtonProps } from '@nextui-org/button';
+import clsx from 'clsx';
+
+interface Props extends ButtonProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Custom button component in the variants solid, bordered and flat. It can be used like a normal NextUI button
+ * component.
+ * @param variant solid | bordered | flat
+ */
+
+export function CustomButton({ children, ...attributes }: Props) {
+  const { variant } = attributes;
+
+  return (
+    <Button
+      {...attributes}
+      className={clsx({
+        'hover:bg-outlinedHover': variant === 'bordered',
+        'hover:bg-hover dark:text-foreground': variant === 'flat' || variant === 'solid',
+        'bg-clickableSecondary hover:text-background ': variant === 'flat',
+        'bg-primary dark:hover:bg-hover text-background': variant === 'solid',
+      })}
+    >
+      {children}
+    </Button>
+  );
+}

tailwind.config.js

@@ -31,6 +31,9 @@ module.exports = {
             background: '#F5F5F5',
             divider: '#157DBC',
             focus: '#157DBC',
+            hover: '#005489',
+            outlinedHover: '#E3F2FD',
+            clickableSecondary: '#E6E6E6',
             danger: '#D32F2F',
             warning: '#FFB600',
             clusterGreen: '#85E77C',
@@ -47,6 +50,9 @@ module.exports = {
             background: '#121212',
             divider: '#157DBC',
             focus: '#157DBC',
+            hover: '#0F6396',
+            outlinedHover: '#0F6396',
+            clickableSecondary: '#424242',
             danger: '#EF5350',
             warning: '#FFEB3B',
             clusterGreen: '#A3F39C',