diff --git a/prettier.config.js b/prettier.config.js index a011f52..c149bce 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,7 +1,12 @@ import technologiestiftung from "@technologiestiftung/prettier-config"; +import { fileURLToPath } from "node:url"; +import { dirname, resolve } from "node:path"; + +const __dirname = dirname(fileURLToPath(import.meta.url)); // eslint-disable-next-line @technologiestiftung/no-default-export export default { ...technologiestiftung, plugins: ["prettier-plugin-tailwindcss"], + tailwindConfig: resolve(__dirname, "./tailwind.config.js"), }; diff --git a/src/App.tsx b/src/App.tsx index e0de863..918cdcc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,47 @@ +import { SendIcon } from "./components/icons/send-icon"; +import { PrimaryButton } from "./components/buttons/primary-button"; +import { SecondaryButton } from "./components/buttons/secondary-button"; +import { ChatBoxButton } from "./components/buttons/chat-box-button"; +import { ChatIcon } from "./components/icons/chat-icon"; +import { IconButton } from "./components/buttons/icon-button"; +import { SidebarIcon } from "./components/icons/sidebar-icon"; +import { NewChatIcon } from "./components/icons/new-chat-icon"; + export function App() { - return

BärGPT - KI Testumgebung

; + return ( +
+

BärGPT - KI Testumgebung

+ + + Senden +
+ } + ariaLabel="Nachricht abschicken" + /> + + } + label={ +
+ Erkläre mir was ich mit BärGPT machen kann. +
+ } + ariaLabel="Erkläre mir was ich mit BärGPT machen kann." + /> + } + ariaLabel="Seitenleiste anzeigen" + title="Seitenleiste anzeigen" + /> + } + ariaLabel="Neuen Chat starten" + title="Neuen Chat starten" + /> + + ); } diff --git a/src/components/buttons/button-types.tsx b/src/components/buttons/button-types.tsx new file mode 100644 index 0000000..3080369 --- /dev/null +++ b/src/components/buttons/button-types.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export interface ButtonProps { + label?: string | React.ReactNode; + onClick?: () => void; + disabled?: boolean; + type?: "button" | "submit"; + ariaLabel?: string; + title?: string; + isLoading?: boolean; + icon?: React.ReactNode; + isOutlineVisible?: boolean; +} diff --git a/src/components/buttons/chat-box-button.tsx b/src/components/buttons/chat-box-button.tsx new file mode 100644 index 0000000..338b351 --- /dev/null +++ b/src/components/buttons/chat-box-button.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { ButtonProps } from "./button-types"; + +export const ChatBoxButton: React.FC = ({ + label, + onClick, + disabled, + type = "button", + ariaLabel, + title, + icon, +}) => { + return ( + + ); +}; diff --git a/src/components/buttons/icon-button.tsx b/src/components/buttons/icon-button.tsx new file mode 100644 index 0000000..d4da1fe --- /dev/null +++ b/src/components/buttons/icon-button.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { ButtonProps } from "./button-types"; + +export const IconButton: React.FC = ({ + onClick, + disabled, + type = "button", + ariaLabel, + title, + icon, + isOutlineVisible = true, +}) => { + return ( + + ); +}; diff --git a/src/components/buttons/primary-button.tsx b/src/components/buttons/primary-button.tsx new file mode 100644 index 0000000..43c26e0 --- /dev/null +++ b/src/components/buttons/primary-button.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { ButtonProps } from "./button-types"; + +export const PrimaryButton: React.FC = ({ + label, + onClick, + disabled, + type = "button", + ariaLabel, + title, +}) => { + return ( + + ); +}; diff --git a/src/components/buttons/secondary-button.tsx b/src/components/buttons/secondary-button.tsx new file mode 100644 index 0000000..e796763 --- /dev/null +++ b/src/components/buttons/secondary-button.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { ButtonProps } from "./button-types"; + +export const SecondaryButton: React.FC = ({ + label, + onClick, + disabled, + type = "button", + ariaLabel, + title, +}) => { + return ( + + ); +}; diff --git a/src/components/icons/chat-icon.tsx b/src/components/icons/chat-icon.tsx new file mode 100644 index 0000000..69092ab --- /dev/null +++ b/src/components/icons/chat-icon.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const ChatIcon: React.FC = () => ( + + + + + + + + + + +); diff --git a/src/components/icons/mail-icon.tsx b/src/components/icons/mail-icon.tsx new file mode 100644 index 0000000..c3ba777 --- /dev/null +++ b/src/components/icons/mail-icon.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const MailIcon: React.FC = () => ( + + + + + + + + + + +); diff --git a/src/components/icons/new-chat-icon.tsx b/src/components/icons/new-chat-icon.tsx new file mode 100644 index 0000000..3745a91 --- /dev/null +++ b/src/components/icons/new-chat-icon.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const NewChatIcon: React.FC = () => ( + + + +); diff --git a/src/components/icons/pdf-icon.tsx b/src/components/icons/pdf-icon.tsx new file mode 100644 index 0000000..8355849 --- /dev/null +++ b/src/components/icons/pdf-icon.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +export const PDFIcon: React.FC = () => ( + + + + + + + + + + +); diff --git a/src/components/icons/send-icon.tsx b/src/components/icons/send-icon.tsx new file mode 100644 index 0000000..4ad17f2 --- /dev/null +++ b/src/components/icons/send-icon.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const SendIcon: React.FC = () => ( + + + +); diff --git a/src/components/icons/sidebar-icon.tsx b/src/components/icons/sidebar-icon.tsx new file mode 100644 index 0000000..a95096c --- /dev/null +++ b/src/components/icons/sidebar-icon.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const SidebarIcon: React.FC = () => ( + + + +); diff --git a/src/components/icons/vermerk-icon.tsx b/src/components/icons/vermerk-icon.tsx new file mode 100644 index 0000000..ef1918a --- /dev/null +++ b/src/components/icons/vermerk-icon.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const VermerkIcon: React.FC = () => ( + + + +); diff --git a/tailwind.config.js b/tailwind.config.js index f7de5e9..191ff4f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,20 @@ /** @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", + "dark-grey": "#333333", + }, + fontFamily: { + arial: ["Arial"], + }, + }, }, plugins: [], };