[add] changed to react components

Hctor11 · Jan 8, 2024 · c042c60 · c042c60
1 parent 8c33e7d
commit c042c60
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 20 deletions.
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
diff --git a/src/components/Aside.tsx b/src/components/Aside.tsx
@@ -0,0 +1,20 @@
+import Navigation from "./Navigation";
+import Darkmode from "./Darkmode.astro";
+
+import React from "react";
+
+const Aside = () => {
+  return (
+    <aside className="p-4 w-screen sm:fixe sm:h-screen md:w-2/12 dark:bg-zinc-900 md:flex md:flex-col md:justify-between  bg-white">
+      <div className="top-section">
+        <div className="title dark:text-white">
+          <h1 className="text-xl font-medium leading-3 ">Hector Rivera</h1>
+          <p className="text-sm">Developer & Designer</p>
+        </div>
+        <Navigation />
+      </div>
+    </aside>
+  );
+};
+
+export default Aside;
diff --git a/src/components/Darkmode.astro b/src/components/Darkmode.astro
@@ -0,0 +1,4 @@
+<div class="bottom-section mt-5 md:mt-0 dark:text-white">
+    <input type="checkbox" name="" id="changeTheme" class="accent-black p-4 dark:text-white dark:accent-white" value="light">
+    <label class="text-sm" for="theme">dark mode</label>
+</div>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -1,12 +1,9 @@
-import { useStore } from "@nanostores/react";
 import { menuState } from "../contentStore";
 import { useState } from "react";
 
 const Navigation = () => {
   const [selectedItem, setSelectedItem] = useState(1);
 
-  const $menuState = useStore(menuState);
-
   const menuItems: { itemName: string; itemState: string; index: number }[] = [
     { itemName: "About me", itemState: "home", index: 1 },
     { itemName: "Work", itemState: "work", index: 2 },

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
-import Aside from "../components/Aside.astro";
+import Aside from "../components/Aside.tsx";
 import Main from "../components/Main";
+import Darkmode from "../components/Darkmode.astro";
 ---
 
 <html lang="en">
@@ -31,3 +32,4 @@ import Main from "../components/Main";
     </script>
   </body>
 </html>
+../components/Aside.tsx