boom

components/Sidebar/Sidebar.tsx

@@ -0,0 +1,31 @@
+import { IconPlus } from "@tabler/icons-react";
+import { FC } from "react";
+import { SidebarSettings } from "./SidebarSettings";
+
+interface Props {
+  lightMode: "light" | "dark";
+  onToggleLightMode: (mode: "light" | "dark") => void;
+}
+
+export const Sidebar: FC<Props> = ({ lightMode, onToggleLightMode }) => {
+  return (
+    <div className="flex flex-col bg-[#202123] min-w-[260px]">
+      <div className="flex items-center justify-center h-[60px]">
+        <button className="flex items-center w-[240px] h-[40px] rounded-lg bg-[#202123] border border-neutral-600 text-sm hover:bg-neutral-700">
+          <IconPlus
+            className="ml-4 mr-3"
+            size={16}
+          />
+          New chat
+        </button>
+      </div>
+
+      <div className="flex-1"></div>
+
+      <SidebarSettings
+        lightMode={lightMode}
+        onToggleLightMode={onToggleLightMode}
+      />
+    </div>
+  );
+};

components/Sidebar/SidebarButton.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+
+interface Props {
+  text: string;
+  icon: JSX.Element;
+  onClick: () => void;
+}
+
+export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
+  return (
+    <div
+      className="flex hover:bg-[#343541] py-2 px-4 rounded-md cursor-pointer w-[200px] items-center"
+      onClick={onClick}
+    >
+      <div className="mr-3">{icon}</div>
+      <div>{text}</div>
+    </div>
+  );
+};

components/Sidebar/SidebarSettings.tsx

@@ -0,0 +1,20 @@
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { FC } from "react";
+import { SidebarButton } from "./SidebarButton";
+
+interface Props {
+  lightMode: "light" | "dark";
+  onToggleLightMode: (mode: "light" | "dark") => void;
+}
+
+export const SidebarSettings: FC<Props> = ({ lightMode, onToggleLightMode }) => {
+  return (
+    <div className="flex flex-col items-center border-t border-neutral-500 py-4">
+      <SidebarButton
+        text={lightMode === "light" ? "Dark mode" : "Light mode"}
+        icon={lightMode === "light" ? <IconMoon /> : <IconSun />}
+        onClick={() => onToggleLightMode(lightMode === "light" ? "dark" : "light")}
+      />
+    </div>
+  );
+};