feat: Implement custom button (#7)

src/app/elements/page.tsx

@@ -1,11 +1,19 @@
+import { CustomButton } from '@/components/Buttons/CustomButton';
 import { Chart } from '@/components/Charts/Chart';
 import container from '@/container';
 import CountryRepository from '@/domain/repositories/CountryRepository';
+
 /**
  * You can use this page to try and show off your components.
  * It's not accessible from the UI, but you can reach it by manually navigating to /elements
  */
 export default async function Elements() {
   const countryData = await container.resolve<CountryRepository>('CountryRepository').getCountryData(50);
-  return <Chart chartData={countryData.fcsGraph} />;
+  return (
+    <div>
+      <Chart chartData={countryData.fcsGraph} />;<CustomButton variant="solid">Test</CustomButton>
+      <CustomButton variant="bordered">Test</CustomButton>
+      <CustomButton variant="flat">Test</CustomButton>
+    </div>
+  );
 }

src/components/Buttons/CustomButton.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@nextui-org/button';
+import clsx from 'clsx';
+
+import { CustomButtonProps } from '@/domain/props/CustomButtonProps';
+
+/**
+ * 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 }: CustomButtonProps) {
+  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>
+  );
+}

src/domain/props/CustomButtonProps.tsx

@@ -0,0 +1,5 @@
+import { ButtonProps } from '@nextui-org/button';
+
+export interface CustomButtonProps extends ButtonProps {
+  children: React.ReactNode;
+}

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',
@@ -48,6 +51,9 @@ module.exports = {
             background: '#121212',
             divider: '#157DBC',
             focus: '#157DBC',
+            hover: '#0F6396',
+            outlinedHover: '#0F6396',
+            clickableSecondary: '#424242',
             danger: '#EF5350',
             warning: '#FFEB3B',
             clusterGreen: '#A3F39C',