From 8ed75e26406f5dd9c260360669b240b302abffa0 Mon Sep 17 00:00:00 2001
From: Lukas0912 <lukas_weigmann@web.de>
Date: Thu, 31 Oct 2024 20:08:50 +0100
Subject: [PATCH] feat: Implement custom button

---
 src/app/elements/page.tsx               | 10 ++++++++-
 src/components/Buttons/CustomButton.tsx | 30 +++++++++++++++++++++++++
 tailwind.config.js                      |  6 +++++
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Buttons/CustomButton.tsx

diff --git a/src/app/elements/page.tsx b/src/app/elements/page.tsx
index 852dea05..17776b4e 100644
--- a/src/app/elements/page.tsx
+++ b/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>
+  );
 }
diff --git a/src/components/Buttons/CustomButton.tsx b/src/components/Buttons/CustomButton.tsx
new file mode 100644
index 00000000..ae71a93b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index c13164da..1a6c417c 100644
--- a/tailwind.config.js
+++ b/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',