Merge remote-tracking branch 'origin/thith'

koompi · Aug 7, 2023 · 0cf4832 · 0cf4832
2 parents 8dcb9fd + d532377
commit 0cf4832
Show file tree

Hide file tree

Showing 15 changed files with 519 additions and 530 deletions.
diff --git a/client/public/images/soon.png b/client/public/images/soon.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -11,6 +11,8 @@ import ProductDetail from "./pages/products/details";
 import Products from "./pages/products";
 import News from "./pages/news";
 import SinglePageNews from "./pages/news/singlePage";
+import Favorite from "./pages/favorite";
+import Order from "./pages/order";
 
 const App: Component = () => {
   return (
@@ -25,6 +27,8 @@ const App: Component = () => {
         <Route path="/products/:id?" component={ProductDetail} />
         <Route path="/news" component={News} />
         <Route path="/news/:id?" component={SinglePageNews} />
+        <Route path="/favorite" component={Favorite} />
+        <Route path="/order" component={Order} />
       </Routes>
       <Footer />
     </section>

diff --git a/client/src/components/cards/Cards.tsx b/client/src/components/cards/Cards.tsx
@@ -35,10 +35,21 @@ const Cards: Component<{ product: Product }> = (props) => {
           onClick={() => {
             navigate(`/products/${props?.product?.id}`);
           }}
+          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="absolute flex flex-col top-0 right-0 p-3">
+              <div
+                id="tooltip-light"
+                role="tooltip"
+                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip"
+              >
+                Available soon
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
               <button
+                data-tooltip-target="tooltip-light"
+                data-tooltip-style="light"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}

diff --git a/client/src/components/cards/Member-cart.tsx b/client/src/components/cards/Member-cart.tsx
@@ -11,7 +11,10 @@ interface Props {
 }
 const MemberCard: Component<Props> = ({ props }) => {
   return (
-    <div class="text-center text-gray-500 dark:text-gray-400">
+    <div
+      class="text-center text-gray-500 dark:text-gray-400"
+      data-aos="zoom-out-down"
+    >
       <img
         class="mx-auto mb-4 w-52 h-52 rounded-full"
         src={props.image}

diff --git a/client/src/components/cards/NewsCard.tsx b/client/src/components/cards/NewsCard.tsx
@@ -16,7 +16,7 @@ const NewsCard: Component<Props> = ({ props }) => {
   return (
     <div class="w-full ">
       <NavLink href={`/news/${props.id}`}>
-        <div class="mx-auto mb-3 max-w-[370px]">
+        <div class="mx-auto mb-3 max-w-[370px]" data-aos="zoom-out-down">
           <div class="mb-3 overflow-hidden rounded-2xl border-gray-200 shadow hover:scale-105 duration-150">
             <img src={props.image} alt="news" class="w-full" />
           </div>

diff --git a/client/src/components/cards/RelatedCard.tsx b/client/src/components/cards/RelatedCard.tsx
@@ -15,7 +15,7 @@ interface Props {
 const RelatedCard: Component<Props> = ({ props }) => {
   return (
     <NavLink href={`/news/${props.id}`}>
-      <div class="lg:w-full mt-2 ">
+      <div class="lg:w-full mt-2 " data-aos="zoom-out-down">
         <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left border p-2 rounded-xl">
           <img
             alt="team"

diff --git a/client/src/components/layouts/NavActive.tsx b/client/src/components/layouts/NavActive.tsx
@@ -0,0 +1,28 @@
+import { Component } from "solid-js";
+import { useLocation } from "@solidjs/router";
+
+export type Nav = {
+  title: string;
+  link: string;
+  isIcon: boolean;
+  icon: any;
+};
+
+const NavActive: Component<Nav> = (props) => {
+  const { title, link, isIcon, icon } = props;
+  const localtion = useLocation();
+
+  return (
+    <a
+      href={link}
+      class={`${
+        localtion.pathname === link && "text-primary font-extrabold"
+      } text-gray-900 flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:opacity-80`}
+    >
+      {isIcon && icon}
+      <span class="font-medium">{title}</span>
+    </a>
+  );
+};
+
+export default NavActive;
diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
@@ -1,9 +1,18 @@
-import { Component, createSignal } from "solid-js";
+import { Component } from "solid-js";
 import { NavLink } from "@solidjs/router";
 import { useCartContext } from "../../context/CartContext";
+import NavActive from "./NavActive";
 
-const Navbar: Component = () => {
+export type Nav = {
+  title: string;
+  link: string;
+  isIcon: boolean;
+  icon: any;
+};
+
+const Navbar: Component<{}> = () => {
   const { cartItems } = useCartContext();
+
   return (
     <div>
       <nav class=" bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100">
@@ -12,88 +21,92 @@ const Navbar: Component = () => {
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
           </a>
           <div class="flex items-center md:order-2">
-            <div class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100">
-              <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>
-              <span class="font-medium">Orders</span>
-            </div>
-            <div class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100">
-              <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>
-              <span class="font-medium">Favorites</span>
-            </div>
-            <a
-              href="/cart"
-              class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100"
-            >
-              <div class="relative">
+            <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 18 21"
+                  viewBox="0 0 20 16"
                 >
-                  <path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z" />
+                  <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>
-                <span class="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-2 text-xs text-white">
-                  {cartItems.length}
-                </span>
-              </div>
-              <span class="font-medium">Cart</span>
-            </a>
+              }
+            />
+            <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>
+              }
+            />
+
+            <NavActive
+              title="Cart"
+              link="/cart"
+              isIcon={true}
+              icon={
+                <div class="relative">
+                  <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 18 21"
+                  >
+                    <path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z" />
+                  </svg>
+                  <span class="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-2 text-xs text-white">
+                    {cartItems.length}
+                  </span>
+                </div>
+              }
+            />
           </div>
           <div
             class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
             id="navbar-language"
           >
-            <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+            <ul class="flex flex-col font-medium md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-3 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
-                <a
-                  href="/"
-                  class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
-                  aria-current="page"
-                >
-                  Home
-                </a>
+                <NavActive title="Home" link="/" isIcon={false} icon={null} />
               </li>
               <li>
-                <a
-                  href="/products"
-                  class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-                >
-                  Products
-                </a>
+                <NavActive
+                  title="Products"
+                  link="/products"
+                  isIcon={false}
+                  icon={null}
+                />
               </li>
               <li>
-                <NavLink
-                  href="/about-us"
-                  class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-                >
-                  About
-                </NavLink>
+                <NavActive
+                  title="About US"
+                  link="/about-us"
+                  isIcon={false}
+                  icon={null}
+                />
               </li>
               <li>
-                <a
-                  href="/news"
-                  class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-                >
-                  News
-                </a>
+                <NavActive
+                  title="News"
+                  link="/news"
+                  isIcon={false}
+                  icon={null}
+                />
               </li>
             </ul>
           </div>

diff --git a/client/src/pages/cart.tsx b/client/src/pages/cart.tsx
@@ -26,7 +26,7 @@ const Cart = () => {
 
   return (
     <>
-      <Checkout />
+      {/* <Checkout /> */}
       <div>
         <div class="mx-auto mt-12 sm:max-w-xl md:max-w-full lg:max-w-screen-xl ">
           <h2 class="text-4xl text-[#98A2AE] font-bold text-center">
@@ -378,8 +378,6 @@ export const Checkout: Component = (props) => {
     console.log(formData());
   };
 
-  console.log(formData);
-
   return (
     <>
       <div
@@ -430,8 +428,9 @@ export const Checkout: Component = (props) => {
             </button>
           </div>
 
+          {/* form */}
           <div class="backdrop-blur-sm bg-white bg-opacity-80 md:p-8 p-3">
-            {/* <form onSubmit={handleSubmit}>
+            <form onSubmit={handleSubmit}>
               <div class="grid grid-cols-2 gap-4">
                 <div class="mb-6">
                   <label class="block text-md text-primary-focus">
@@ -521,7 +520,7 @@ export const Checkout: Component = (props) => {
                   </button>
                 )}
               </div>
-            </form> */}
+            </form>
 
             <form>
               <div class="mb-6">

diff --git a/client/src/pages/favorite.tsx b/client/src/pages/favorite.tsx
@@ -0,0 +1,27 @@
+import { Component } from "solid-js";
+
+const Favorite: Component = () => {
+  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">
+          <img alt="comming soon" src="./images/soon.png" />
+          <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+            Coming Soon
+          </p>
+          <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            You'll find lots to explore on the home page.{" "}
+          </p>
+          <a
+            href="/"
+            class="inline-flex text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4"
+          >
+            Back to Homepage
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Favorite;
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
@@ -200,7 +200,7 @@ export const LatestProducts: Component<{}> = () => {
 
 export const MainProducts: Component<{}> = () => {
   const fetchData = async () => {
-    const res = await fetch("http://localhost:60011/CoreProducts");
+    const res = await fetch("https://cptdb.koompi.com/CoreProducts");
     return res.json();
   };
   const [coreProducts] = createResource(fetchData);

diff --git a/client/src/pages/order.tsx b/client/src/pages/order.tsx
@@ -0,0 +1,25 @@
+const Order = () => {
+  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">
+          <img alt="comming soon" src="./images/soon.png" />
+          <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+            Coming Soon
+          </p>
+          <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            You'll find lots to explore on the home page.{" "}
+          </p>
+          <a
+            href="/"
+            class="inline-flex text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4"
+          >
+            Back to Homepage
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Order;