feat: add primary and secondary button

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>
+	);
 }

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>
+);

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>
+	);
+};

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>
+	);
+};

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: [],
 };