layout mimics actual chatgpt ui

src/components/svg/DarkModeIcon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function DarkModeIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  );
+}

src/components/svg/LogOutIcon.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default function LogOutIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+      <polyline points="16 17 21 12 16 7"></polyline>
+      <line
+        x1="21"
+        y1="12"
+        x2="9"
+        y2="12"
+      ></line>
+    </svg>
+  );
+}

src/components/svg/TrashIcon.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export default function TrashIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline points="3 6 5 6 21 6"></polyline>
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+      <line
+        x1="10"
+        y1="11"
+        x2="10"
+        y2="17"
+      ></line>
+      <line
+        x1="14"
+        y1="11"
+        x2="14"
+        y2="17"
+      ></line>
+    </svg>
+  );
+}