Changes to be committed:

modified: client/data/Lates-product.tsx new file: client/public/images/angkor-rawpixel.jpg new file: client/public/images/jcomp.jpg modified: client/src/App.tsx modified: client/src/components/cards/Cards.tsx modified: client/src/components/layouts/Footer.tsx modified: client/src/components/layouts/Navbar.tsx modified: client/src/context/CartContext.tsx modified: client/src/index.css new file: client/src/pages/404.tsx modified: client/src/pages/home.tsx new file: client/src/pages/login.tsx modified: client/src/pages/news/index.tsx modified: client/src/pages/products/index.tsx new file: client/src/pages/register.tsx new file: client/src/pages/reset.tsx
koompi · Aug 21, 2023 · 4a2b132 · 4a2b132
1 parent 3e11bb6
commit 4a2b132
Show file tree

Hide file tree

Showing 16 changed files with 608 additions and 99 deletions.
diff --git a/client/data/Lates-product.tsx b/client/data/Lates-product.tsx
@@ -26,6 +26,7 @@ const latesProducts = [
     rating: 5,
     brand: "EVOLIS",
     price: 300,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -35,6 +36,7 @@ const latesProducts = [
     rating: 5,
     brand: "FUJIFILM",
     price: 3300,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -44,6 +46,7 @@ const latesProducts = [
     rating: 5,
     brand: "RIBBON",
     price: 98,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -63,6 +66,7 @@ const latesProducts = [
     rating: 5,
     brand: "EVOLIS",
     price: 300,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -72,6 +76,7 @@ const latesProducts = [
     rating: 5,
     brand: "FUJIFILM",
     price: 3100,
+    category: "sdf",
     quantity: 1,
   },
 ];

diff --git a/client/public/images/angkor-rawpixel.jpg b/client/public/images/angkor-rawpixel.jpg
diff --git a/client/public/images/jcomp.jpg b/client/public/images/jcomp.jpg
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -13,13 +13,24 @@ import News from "./pages/news";
 import SinglePageNews from "./pages/news/singlePage";
 import Favorite from "./pages/favorite";
 import Order from "./pages/order";
+import Login from "./pages/login";
+import { useLocation } from "@solidjs/router";
+import NotFound from "./pages/404";
+import Register from "./pages/register";
+import Reset from "./pages/reset";
 
 const App: Component = () => {
+  const location = useLocation();
   return (
     <section>
-      <Navbar />
+      {location.pathname !== "/login" &&
+        location.pathname !== "/register" &&
+        location.pathname !== "/reset" && <Navbar />}
       <Routes>
         <Route path="/" component={Home} />
+        <Route path="/login" component={Login} />
+        <Route path="/register" component={Register} />
+        <Route path="/reset" component={Reset} />
         <Route path="/about-us" component={About} />
         <Route path="/contact-us" component={Contact} />
         <Route path="/cart" component={Cart} />
@@ -31,8 +42,11 @@ const App: Component = () => {
         <Route path="/news/:id?" component={SinglePageNews} />
         <Route path="/favorite" component={Favorite} />
         <Route path="/order" component={Order} />
+        <Route path="/*" component={NotFound} />
       </Routes>
-      <Footer />
+      {location.pathname !== "/login" &&
+        location.pathname !== "/register" &&
+        location.pathname !== "/reset" && <Footer />}
     </section>
   );
 };

diff --git a/client/src/components/cards/Cards.tsx b/client/src/components/cards/Cards.tsx
@@ -12,9 +12,7 @@ export type Product = {
   category: string;
   quantity: number;
 };
-interface Props {
-  props: Product;
-}
+
 const Cards: Component<{ product: Product }> = (props) => {
   const { cartItems, addToCart } = useCartContext();
   const navigate = useNavigate();
@@ -37,7 +35,7 @@ const Cards: Component<{ product: Product }> = (props) => {
           }}
           data-aos="zoom-out-down"
         >
-          <div class="group relative max-w-sm h-[25.5rem] bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 ">
+          <div class="group relative max-w-sm h-[25.5rem] md:h-auto bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 ">
             <div class="absolute flex flex-col top-0 right-0 p-3">
               <div
                 id="tooltip-light"
@@ -53,21 +51,21 @@ const Cards: Component<{ product: Product }> = (props) => {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                class="z-40 transition ease-in duration-300 bg-gray-50  hover:text-danger shadow hover:shadow-md text-red-300 rounded-full w-8 h-8 text-center p-1"
+                class="z-40 transition ease-in duration-300 bg-gray-50  hover:text-danger shadow hover:shadow-md text-red-300 rounded-full w-8 h-8 lg:h-6 lg:w-6 2xl:h-8 2xl:w-8 text-center p-1"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   fill="currentColor"
-                  class="w-6 h-6"
+                  class="w-6 h-6 lg:w-4 lg:h-4 2xl:w-6 2xl:h-6"
                 >
                   <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
                 </svg>
               </button>
             </div>
             <div class="w-full">
               <img
-                class="p-3 rounded-t-lg w-60 max-w-sm mx-auto group-hover:scale-110 duration-150"
+                class="p-3 rounded-t-lg w-60 sm:w-48 mx-auto group-hover:scale-110 duration-150"
                 src={props?.product?.image}
                 alt="product image"
               />
@@ -133,7 +131,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                   props?.product?.name?.length > 35 ? "mt-1" : "mt-7"
                 }`}
               >
-                <span class="text-3xl font-bold text-danger dark:text-white ">
+                <span class="text-3xl lg:text-xl 2xl:text-3xl font-bold text-danger dark:text-white ">
                   ${props.product?.price}
                 </span>
                 {!isInCart() ? (
@@ -142,7 +140,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                       e.stopPropagation();
                       handleAddTocart(props.product);
                     }}
-                    class="text-primary hover:text-white border border-primary hover:border-danger hover:bg-danger focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    class="text-primary hover:text-white border border-primary hover:border-danger hover:bg-danger focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 lg:py-1.5 2xl:py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                   >
                     Add to cart
                   </button>
@@ -152,7 +150,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                       e.stopPropagation();
                       navigate(`/cart`);
                     }}
-                    class="text-white hover:text-white border bg-danger hover:bg-red-500 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    class="text-white hover:text-white border bg-danger hover:bg-red-500 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 lg:py-1.5 2xl:py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                   >
                     View Cart
                   </button>

diff --git a/client/src/components/layouts/Footer.tsx b/client/src/components/layouts/Footer.tsx
@@ -3,7 +3,7 @@ import { Component } from "solid-js";
 
 const Footer: Component = () => {
   return (
-    <footer class="relative z-10 bg-white pt-20 pb-10 lg:pt-[120px] lg:pb-20">
+    <footer class="relative z-10 bg-white pt-20 pb-10 lg:pt-[120px] lg:pb-20 px-3 md:px-12 lg:px-24">
       <div class="container mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
         <div class="-mx-4 flex flex-wrap">
           <div class="w-full px-4 sm:w-2/3 lg:w-3/12">
@@ -56,7 +56,7 @@ const Footer: Component = () => {
               </p>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-2/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-2/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Resources</h4>
               <ul>
@@ -95,7 +95,7 @@ const Footer: Component = () => {
               </ul>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-2/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-2/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Company</h4>
               <ul>
@@ -134,7 +134,7 @@ const Footer: Component = () => {
               </ul>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-2/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-2/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Quick Links</h4>
               <ul>
@@ -173,7 +173,7 @@ const Footer: Component = () => {
               </ul>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-3/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-3/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Follow Us On</h4>
               <div class="mb-6 flex items-center">

diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
@@ -15,44 +15,30 @@ const Navbar: Component<{}> = () => {
 
   return (
     <div>
-      <nav class=" bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100">
-        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+      <nav class="bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100 ">
+        <div class="max-w-screen-xl flex lg:flex-wrap  items-center justify-between mx-auto p-4 md:px-24">
           <A href="/" class="flex items-center">
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
           </A>
           <div class="flex items-center md:order-2">
-            <NavActive
-              title="Order"
-              link="/order"
-              isIcon={true}
-              icon={
-                <svg
-                  class="w-5 h-5 text-gray-600 dark:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 16"
-                >
-                  <path d="M19 0H1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1ZM2 6v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6H2Zm11 3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0h2a1 1 0 0 1 2 0v1Z" />
-                </svg>
-              }
-            />
-            <NavActive
-              title="Favorites"
-              link="/favorite"
-              isIcon={true}
-              icon={
-                <svg
-                  class="w-5 h-5 text-gray-600 dark:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 18"
-                >
-                  <path d="M17.947 2.053a5.209 5.209 0 0 0-3.793-1.53A6.414 6.414 0 0 0 10 2.311 6.482 6.482 0 0 0 5.824.5a5.2 5.2 0 0 0-3.8 1.521c-1.915 1.916-2.315 5.392.625 8.333l7 7a.5.5 0 0 0 .708 0l7-7a6.6 6.6 0 0 0 2.123-4.508 5.179 5.179 0 0 0-1.533-3.793Z" />
-                </svg>
-              }
-            />
+            <div class="hidden md:hidden lg:block">
+              <NavActive
+                title="Favorites"
+                link="/favorite"
+                isIcon={true}
+                icon={
+                  <svg
+                    class="w-5 h-5 text-gray-600 dark:text-white "
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 18"
+                  >
+                    <path d="M17.947 2.053a5.209 5.209 0 0 0-3.793-1.53A6.414 6.414 0 0 0 10 2.311 6.482 6.482 0 0 0 5.824.5a5.2 5.2 0 0 0-3.8 1.521c-1.915 1.916-2.315 5.392.625 8.333l7 7a.5.5 0 0 0 .708 0l7-7a6.6 6.6 0 0 0 2.123-4.508 5.179 5.179 0 0 0-1.533-3.793Z" />
+                  </svg>
+                }
+              />
+            </div>
 
             <NavActive
               title="Cart"
@@ -75,6 +61,66 @@ const Navbar: Component<{}> = () => {
                 </div>
               }
             />
+
+            <div
+              id="avatarButton"
+              data-dropdown-toggle="dropdownInformation"
+              data-dropdown-placement="bottom-start"
+              class="relative overflow-hidden bg-gray-100 dark:bg-gray-600 w-8 h-8 rounded-full cursor-pointer ml-3"
+            >
+              <svg
+                class="absolute w-9 h-9 text-gray-600 -left-1"
+                fill="currentColor"
+                viewBox="0 0 18 18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </div>
+
+            <div
+              id="dropdownInformation"
+              class="z-50 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
+            >
+              {/* <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
+                <div>Bonnie Green</div>
+                <div class="font-medium truncate">name@flowbite.com</div>
+              </div> */}
+              <ul
+                class="py-2 text-sm text-gray-700 dark:text-gray-200"
+                aria-labelledby="dropdownInformationButton"
+              >
+                <li>
+                  <A
+                    href="/login"
+                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                  >
+                    My Account
+                  </A>
+                </li>
+
+                <li>
+                  <A
+                    href="/order"
+                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                  >
+                    Orders
+                  </A>
+                </li>
+              </ul>
+              <div class="py-2">
+                <a
+                  href="#"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Sign out
+                </a>
+              </div>
+            </div>
           </div>
           <div
             class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"

diff --git a/client/src/context/CartContext.tsx b/client/src/context/CartContext.tsx
@@ -1,11 +1,4 @@
-import {
-  Accessor,
-  Setter,
-  createContext,
-  createEffect,
-  createSignal,
-  useContext,
-} from "solid-js";
+import { Show, createContext, createEffect, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 
 type Product = {

diff --git a/client/src/index.css b/client/src/index.css
@@ -6,6 +6,7 @@
 
 html {
   scroll-behavior: smooth !important;
+  overflow-x: hidden !important;
 }
 
 body {
@@ -124,3 +125,9 @@ body {
   width: 100%;
   height: 100%;
 }
+
+/* @media only screen and (max-width: 600px) {
+  body {
+   
+  }
+} */
diff --git a/client/src/pages/404.tsx b/client/src/pages/404.tsx
@@ -0,0 +1,30 @@
+import { A } from "@solidjs/router";
+
+const NotFound = () => {
+  return (
+    <section class="bg-white dark:bg-gray-900">
+      <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div class="mx-auto max-w-screen-sm text-center">
+          <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary dark:text-primary">
+            404
+          </h1>
+          <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+            Something's missing.
+          </p>
+          <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            Sorry, we can't find that page. You'll find lots to explore on the
+            home page.{" "}
+          </p>
+          <A
+            href="/"
+            class="inline-flex rounded-xl text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium text-sm px-5 py-2.5 text-center dark:focus:ring-primary my-4"
+          >
+            Back to Homepage
+          </A>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NotFound;