From d49230c88d587ae77bf2d55763b1f39874bd3f60 Mon Sep 17 00:00:00 2001
From: aeschi <anna.eschenbacher@icloud.com>
Date: Tue, 23 Jul 2024 13:22:04 +0200
Subject: [PATCH] feat: add primary and secondary button

---
 src/App.tsx                                | 20 +++++++++++++-
 src/components/buttons/icons/send-icon.tsx | 16 +++++++++++
 src/components/buttons/primary.tsx         | 31 ++++++++++++++++++++++
 src/components/buttons/secondary.tsx       | 31 ++++++++++++++++++++++
 tailwind.config.js                         | 13 ++++++++-
 5 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 src/components/buttons/icons/send-icon.tsx
 create mode 100644 src/components/buttons/primary.tsx
 create mode 100644 src/components/buttons/secondary.tsx

diff --git a/src/App.tsx b/src/App.tsx
index e0de863..2d0d3a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,21 @@
+import { SendIcon } from "./components/buttons/icons/send-icon";
+import { PrimaryButton } from "./components/buttons/primary";
+import { SecondaryButton } from "./components/buttons/secondary";
+
 export function App() {
-	return <h1>BärGPT - KI Testumgebung</h1>;
+	return (
+		<div className="font-arial p-4">
+			<h1 aria-label="button">BärGPT - KI Testumgebung</h1>
+			<PrimaryButton
+				label={
+					<div className="flex flex-row items-center gap-2">
+						<SendIcon />
+						Senden
+					</div>
+				}
+				ariaLabel="Nachricht abschicken"
+			/>
+			<SecondaryButton label="E–Mail Hilfe" ariaLabel="E–Mail Hilfe" />
+		</div>
+	);
 }
diff --git a/src/components/buttons/icons/send-icon.tsx b/src/components/buttons/icons/send-icon.tsx
new file mode 100644
index 0000000..4ad17f2
--- /dev/null
+++ b/src/components/buttons/icons/send-icon.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const SendIcon: React.FC = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="19"
+		height="19"
+		viewBox="0 0 19 19"
+		fill="none"
+	>
+		<path
+			d="M18.4846 0.207954C18.8594 0.46772 19.0561 0.916743 18.9855 1.36577L16.6105 16.8033C16.5549 17.1632 16.3359 17.4787 16.0168 17.6568C15.6977 17.8349 15.3154 17.8572 14.9777 17.7162L10.5394 15.8718L7.99746 18.6216C7.66718 18.9816 7.14765 19.1003 6.69121 18.9222C6.23476 18.7441 5.93789 18.3025 5.93789 17.8126V14.7103C5.93789 14.5619 5.99355 14.4208 6.09375 14.3095L12.3133 7.52592C12.5285 7.29213 12.5211 6.93217 12.2984 6.70952C12.0758 6.48686 11.7158 6.47202 11.482 6.68354L3.93398 13.3892L0.657223 11.749C0.263863 11.5523 0.0115193 11.1589 0.000386514 10.721C-0.0107463 10.2831 0.219332 9.87495 0.597847 9.656L17.2228 0.156001C17.6199 -0.0703659 18.1098 -0.0481003 18.4846 0.207954Z"
+			fill="currentColor"
+		/>
+	</svg>
+);
diff --git a/src/components/buttons/primary.tsx b/src/components/buttons/primary.tsx
new file mode 100644
index 0000000..bfe6cff
--- /dev/null
+++ b/src/components/buttons/primary.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface PrimaryButtonProps {
+	label: string | React.ReactNode;
+	onClick?: () => void;
+	disabled?: boolean;
+	type?: "button" | "submit";
+	ariaLabel?: string;
+	isLoading?: boolean;
+}
+
+export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+	label,
+	onClick,
+	disabled,
+	type = "button",
+	ariaLabel,
+}) => {
+	return (
+		<button
+			className={`bg-dark-blue hover:bg-light-blue disabled:bg-light-grey hover:text-dark-blue disabled:text-dark-blue active:text-dark-blue outline-mid-grey my-2 flex h-[35px] w-fit items-center justify-center rounded px-3 text-sm font-semibold text-white active:bg-white active:font-normal active:outline active:outline-1 disabled:font-normal disabled:active:outline-none`}
+			disabled={disabled}
+			onClick={onClick}
+			type={type}
+			aria-label={ariaLabel}
+			title={ariaLabel}
+		>
+			<span>{label}</span>
+		</button>
+	);
+};
diff --git a/src/components/buttons/secondary.tsx b/src/components/buttons/secondary.tsx
new file mode 100644
index 0000000..f493794
--- /dev/null
+++ b/src/components/buttons/secondary.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface PrimaryButtonProps {
+	label: string | React.ReactNode;
+	onClick?: () => void;
+	disabled?: boolean;
+	type?: "button" | "submit";
+	ariaLabel?: string;
+	isLoading?: boolean;
+}
+
+export const SecondaryButton: React.FC<PrimaryButtonProps> = ({
+	label,
+	onClick,
+	disabled,
+	type = "button",
+	ariaLabel,
+}) => {
+	return (
+		<button
+			className={`hover:bg-light-grey text-dark-blue outline-mid-grey my-2 flex h-[35px] w-fit items-center justify-center rounded bg-white px-3 text-sm font-normal outline outline-1 active:bg-white active:font-semibold`}
+			disabled={disabled}
+			onClick={onClick}
+			type={type}
+			aria-label={ariaLabel}
+			title={ariaLabel}
+		>
+			<span>{label}</span>
+		</button>
+	);
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index f7de5e9..9999209 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,19 @@
 /** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line @technologiestiftung/no-default-export
 export default {
 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				"dark-blue": "#1C2554",
+				"light-blue": "#A9C9E7",
+				"light-grey": "#F2F2F2",
+				"mid-grey": "#D7D7D7",
+			},
+			fontFamily: {
+				arial: ["Arial"],
+			},
+		},
 	},
 	plugins: [],
 };