new view and components

app/Components/Toggle/Toggle.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState, ReactNode } from "react";
+
+interface ToggleOption {
+  key: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface ToggleProps {
+  options: ToggleOption[];
+  defaultView?: string;
+}
+
+export default function Toggle({ options, defaultView }: ToggleProps) {
+  const [view, setView] = useState(defaultView || options[0].key);
+
+  return (
+    <section className="toggleSection">
+      <div className="toggleGroup">
+        {options.map((opt) => (
+          <button
+            key={opt.key}
+            className={`toggleButton ${view === opt.key ? "active" : ""}`}
+            onClick={() => setView(opt.key)}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="padding">
+        {options.find((opt) => opt.key === view)?.content}
+      </div>
+    </section>
+  );
+}