fix: fixes the menu cards

nubiemir · Aug 26, 2024 · 3076348 · 3076348
1 parent 6cd0789
commit 3076348
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 275 deletions.
diff --git a/src/assets/binoculars-solid.svg b/src/assets/binoculars-solid.svg
diff --git a/src/assets/book.svg b/src/assets/book.svg
diff --git a/src/assets/graph.svg b/src/assets/graph.svg
diff --git a/src/components/common/Carousel.tsx b/src/components/common/Carousel.tsx
diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
@@ -0,0 +1,28 @@
+import { ParentComponent, children } from "solid-js";
+
+interface PaginationProps {
+  title?: string;
+}
+
+const Pagination: ParentComponent<PaginationProps> = (props) => {
+  const resolvedChildern = children(() => props.children);
+
+  return (
+    <div class="w-[100%] h-[100%] py-4 overflow-x-hidden">
+      <div class="w-[100%] h-[100%] flex flex-col gap-5">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center gap-4">
+            <h2 class="text-2xl font-bold">{props.title}</h2>
+          </div>
+        </div>
+        <div class="w-[100%]">
+          <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-2 justify-center">
+            {resolvedChildern()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -5,12 +5,12 @@ import ThemeController from "./ThemeController";
 
 const Header = () => {
   return (
-    <header class="navbar bg-base-300">
+    <header class="navbar ">
       <div class="navbar-start">
         <div>
-            <A href="/">
-              <Logo />
-            </A>
+          <A href="/">
+            <Logo />
+          </A>
         </div>
       </div>
       <nav class="navbar-center px-4 hidden md:flex">
@@ -22,31 +22,34 @@ const Header = () => {
         </ul>
       </nav>
       <div class="navbar-end px-4">
-          <div class="dropdown dropdown-end">
-              <div tabIndex={0} role="button" class="btn btn-ghost md:hidden">
-                  <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-8 w-8"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor">
-                      <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M4 6h16M4 12h8m-8 6h16" />
-                  </svg>
-              </div>
-              <ul
-                  tabIndex={0}
-                  class="menu menu-md dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
-                  <Link label="Home" to="/"></Link>
-                  <Link label="Algorithm" to="/algorithm"></Link>
-                  <Link label="Data Structure" to="/data-structure"></Link>
-                  <Link label="Interview Prep" to="/interview-prep"></Link>
-              </ul>
+        <div class="dropdown dropdown-end">
+          <div tabIndex={0} role="button" class="btn btn-ghost md:hidden">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-8 w-8"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h8m-8 6h16"
+              />
+            </svg>
           </div>
-        <ThemeController/>
+          <ul
+            tabIndex={0}
+            class="menu menu-md dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
+          >
+            <Link label="Home" to="/"></Link>
+            <Link label="Algorithm" to="/algorithm"></Link>
+            <Link label="Data Structure" to="/data-structure"></Link>
+            <Link label="Interview Prep" to="/interview-prep"></Link>
+          </ul>
+        </div>
+        <ThemeController />
       </div>
     </header>
   );

diff --git a/src/components/home/Intro.tsx b/src/components/home/Intro.tsx
@@ -1,5 +1,3 @@
-// import Search from "./Search";
-
 const Intro = () => {
   return (
     <section class="md:w-[70%] w-[90%] m-auto mt-4 bg-gray-100 rounded-lg overflow-hidden">
@@ -16,9 +14,6 @@ const Intro = () => {
                 interactive visualizations.
               </p>
             </div>
-            {/* <div class="lg:w-[400px] md:w-[300px]">
-              <Search />
-            </div> */}
           </div>
         </div>
       </div>

diff --git a/src/components/home/MenuCard/index.tsx b/src/components/home/MenuCard/index.tsx
@@ -1,33 +1,34 @@
 import { A } from "@solidjs/router";
+import VisualizeIcon from "../../../assets/graph.svg";
+import ReadIcon from "../../../assets/book.svg";
 
 interface IMenuCardProps {
   image?: string;
   title?: string;
   visualizeLink: string;
   readLink: string;
+  category?: string;
 }
 
 const MenuCard = (props: IMenuCardProps) => {
   return (
-    <div class="w-[100%] h-[100%] card glass bg-base-100 shadow-xl">
-      <figure class="w-[100%] h-[100%]">
-        <img src={props.image} class="min-w-[100%] object-contain" />
-      </figure>
+    <div class="w-[100%] h-[100%] card bg-base-300 p-2">
       <div class="card-body px-2 py-4 gap-1">
+        <h4 class="opacity-65">{props.category}</h4>
         <h1 class="card-title text-lg">{props.title}</h1>
-        <div class="card-actions justify-between">
-          <A
-            class="btn btn-outline btn-primary h-[2.5rem] min-h-[2.5rem]"
-            href={props.visualizeLink}
-          >
-            Visualize
-          </A>
-          <A
-            class="btn btn-outline h-[2.5rem] min-h-[2.5rem]"
-            href={props.readLink}
-          >
-            Read
-          </A>
+        <p>Swaps adjacent elements if out of order.</p>
+        <div class="divider"></div>
+        <div class="flex justify-between">
+          <div class="sm:tooltip" data-tip="Read">
+            <A class="btn bg-base-100" href={props.readLink}>
+              <img src={ReadIcon} width={20} height={20} />
+            </A>
+          </div>
+          <div class="sm:tooltip" data-tip="Visualize">
+            <A class="btn bg-base-100" href={props.visualizeLink}>
+              <img src={VisualizeIcon} width={20} height={20} />
+            </A>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/home/MenuList.tsx b/src/components/home/MenuList.tsx
@@ -1,26 +1,25 @@
 import MenuCard from "./MenuCard";
 import testImage from "../../assets/test-image.png";
-import Carousel from "../common/Carousel";
+import Pagination from "../common/Pagination";
 import { For } from "solid-js";
 import { menuList } from "../../types/menu-list";
 
 const MenuList = () => {
   return (
     <section class="md:w-[70%] w-[90%] m-auto my-6">
-      <Carousel title="Featured Visualization" len={menuList.length}>
+      <Pagination title="Featured Visualization">
         <For each={menuList}>
           {(item, _) => (
-            <div class="min-w-[180px] md:min-w-[220px] w-[100]">
-              <MenuCard
-                title={item.title}
-                image={testImage}
-                visualizeLink={item.visualizeLink}
-                readLink={item.readLink}
-              />
-            </div>
+            <MenuCard
+              title={item.title}
+              image={testImage}
+              visualizeLink={item.visualizeLink}
+              readLink={item.readLink}
+              category={item.category}
+            />
           )}
         </For>
-      </Carousel>
+      </Pagination>
     </section>
   );
 };

diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -5,12 +5,12 @@ import ThemeContext from "../../context/theme/theme-context";
 const Layout: ParentComponent = (props) => {
   return (
     <ThemeContext>
-      <div class="w-[100vw]">
-        <div class="w-[100%] h-[100%]">
+      <div class="w-[100vw] bg-base-300">
+        <div class="w-[100%] h-[100%] max-w-[1600px] mx-[auto]">
           <Header />
         </div>
       </div>
-      <div class="w-[100vw] max-w-[1600px] mx-[auto] ">{props.children}</div>
+      <div class="w-[100vw] max-w-[1600px] mx-[auto]">{props.children}</div>
     </ThemeContext>
   );
 };