Changes to be committed:

modified: client/src/components/cards/Member-cart.tsx modified: client/src/components/cards/NewsCard.tsx modified: client/src/components/layouts/Footer.tsx modified: client/src/components/layouts/Navbar.tsx modified: client/src/pages/cart.tsx modified: client/src/pages/favorite.tsx modified: client/src/pages/home.tsx modified: client/src/pages/news/singlePage.tsx modified: client/src/pages/order.tsx modified: client/src/pages/products/details.tsx modified: client/src/pages/products/index.tsx
koompi · Aug 7, 2023 · 60aa955 · 60aa955
1 parent 6c0a11b
commit 60aa955
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 143 deletions.
diff --git a/client/src/components/cards/Member-cart.tsx b/client/src/components/cards/Member-cart.tsx
@@ -1,4 +1,5 @@
 import { Component } from "solid-js";
+import { A } from "@solidjs/router";
 
 export type Members = {
   id: string;
@@ -21,7 +22,7 @@ const MemberCard: Component<Props> = ({ props }) => {
         alt="Bonnie Avatar"
       />
       <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-        <a href="#">{props.name}</a>
+        <A href="#">{props.name}</A>
       </h3>
 
       <p>{props.position}</p>

diff --git a/client/src/components/cards/NewsCard.tsx b/client/src/components/cards/NewsCard.tsx
@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import { NavLink } from "@solidjs/router";
+import { NavLink, A } from "@solidjs/router";
 
 export type NewsData = {
   id: string;
@@ -22,12 +22,12 @@ const NewsCard: Component<Props> = ({ props }) => {
           </div>
           <div>
             <h3>
-              <a
+              <A
                 href="javascript:void(0)"
                 class="text-dark hover:text-primary inline-block text-xl font-semibold sm:text-lg lg:text-lg xl:text-lg"
               >
                 {props.title}
-              </a>
+              </A>
             </h3>
             <p class="text-body-color text-base">{props.des}</p>
           </div>

diff --git a/client/src/components/layouts/Footer.tsx b/client/src/components/layouts/Footer.tsx
@@ -1,4 +1,4 @@
-import { NavLink } from "@solidjs/router";
+import { A } from "@solidjs/router";
 import { Component } from "solid-js";
 
 const Footer: Component = () => {
@@ -8,12 +8,12 @@ const Footer: Component = () => {
         <div class="-mx-4 flex flex-wrap">
           <div class="w-full px-4 sm:w-2/3 lg:w-3/12">
             <div class="mb-10 w-full">
-              <a
+              <A
                 href="javascript:void(0)"
                 class="mb-6 inline-block max-w-[160px]"
               >
                 <img class="w-36" src="/images/footer-logo.png" />
-              </a>
+              </A>
               <p class="text-body-color mb-7 text-base">
                 #18C1, Sangkat Tuek Thlar, Khan Sen Sok, Phnom Penh, Cambodia
               </p>
@@ -64,36 +64,36 @@ const Footer: Component = () => {
               <h4 class="text-dark mb-9 text-lg font-semibold">Resources</h4>
               <ul>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     SaaS Development
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Our Products
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     User Flow
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     User Strategy
-                  </a>
+                  </A>
                 </li>
               </ul>
             </div>
@@ -103,36 +103,36 @@ const Footer: Component = () => {
               <h4 class="text-dark mb-9 text-lg font-semibold">Company</h4>
               <ul>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     About US
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Contact & Support
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Success History
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Setting & Privacy
-                  </a>
+                  </A>
                 </li>
               </ul>
             </div>
@@ -142,36 +142,36 @@ const Footer: Component = () => {
               <h4 class="text-dark mb-9 text-lg font-semibold">Quick Links</h4>
               <ul>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Premium Support
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Our Services
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Know Our Team
-                  </a>
+                  </A>
                 </li>
                 <li>
-                  <a
+                  <A
                     href="javascript:void(0)"
                     class="text-body-color hover:text-primary mb-2 inline-block text-base leading-loose"
                   >
                     Download App
-                  </a>
+                  </A>
                 </li>
               </ul>
             </div>
@@ -180,7 +180,7 @@ const Footer: Component = () => {
             <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">
-                <a
+                <A
                   href="javascript:void(0)"
                   class="text-dark hover:bg-primary hover:border-primary mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-3 xl:mr-4"
                 >
@@ -192,8 +192,8 @@ const Footer: Component = () => {
                   >
                     <path d="M7.43902 6.4H6.19918H5.75639V5.88387V4.28387V3.76774H6.19918H7.12906C7.3726 3.76774 7.57186 3.56129 7.57186 3.25161V0.516129C7.57186 0.232258 7.39474 0 7.12906 0H5.51285C3.76379 0 2.54609 1.44516 2.54609 3.5871V5.83226V6.34839H2.10329H0.597778C0.287819 6.34839 0 6.63226 0 7.04516V8.90323C0 9.26452 0.243539 9.6 0.597778 9.6H2.05902H2.50181V10.1161V15.3032C2.50181 15.6645 2.74535 16 3.09959 16H5.18075C5.31359 16 5.42429 15.9226 5.51285 15.8194C5.60141 15.7161 5.66783 15.5355 5.66783 15.3806V10.1419V9.62581H6.13276H7.12906C7.41688 9.62581 7.63828 9.41935 7.68256 9.10968V9.08387V9.05806L7.99252 7.27742C8.01466 7.09677 7.99252 6.89032 7.85968 6.68387C7.8154 6.55484 7.61614 6.42581 7.43902 6.4Z" />
                   </svg>
-                </a>
-                <a
+                </A>
+                <A
                   href="javascript:void(0)"
                   class="text-dark hover:bg-primary hover:border-primary mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-3 xl:mr-4"
                 >
@@ -205,8 +205,8 @@ const Footer: Component = () => {
                   >
                     <path d="M14.2194 2.06654L15.2 0.939335C15.4839 0.634051 15.5613 0.399217 15.5871 0.2818C14.8129 0.704501 14.0903 0.845401 13.6258 0.845401H13.4452L13.3419 0.751468C12.7226 0.258317 11.9484 0 11.1226 0C9.31613 0 7.89677 1.36204 7.89677 2.93542C7.89677 3.02935 7.89677 3.17025 7.92258 3.26419L8 3.73386L7.45806 3.71037C4.15484 3.61644 1.44516 1.03327 1.00645 0.587084C0.283871 1.76125 0.696774 2.88845 1.13548 3.59296L2.0129 4.90802L0.619355 4.20352C0.645161 5.18982 1.05806 5.96477 1.85806 6.52838L2.55484 6.99804L1.85806 7.25636C2.29677 8.45401 3.27742 8.94716 4 9.13503L4.95484 9.36986L4.05161 9.93346C2.60645 10.8728 0.8 10.8024 0 10.7319C1.62581 11.7652 3.56129 12 4.90323 12C5.90968 12 6.65806 11.9061 6.83871 11.8356C14.0645 10.2857 14.4 4.41487 14.4 3.2407V3.07632L14.5548 2.98239C15.4323 2.23092 15.7935 1.8317 16 1.59687C15.9226 1.62035 15.8194 1.66732 15.7161 1.6908L14.2194 2.06654Z" />
                   </svg>
-                </a>
-                <a
+                </A>
+                <A
                   href="javascript:void(0)"
                   class="text-dark hover:bg-primary hover:border-primary mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-3 xl:mr-4"
                 >
@@ -218,8 +218,8 @@ const Footer: Component = () => {
                   >
                     <path d="M15.6645 1.88018C15.4839 1.13364 14.9419 0.552995 14.2452 0.359447C13.0065 6.59222e-08 8 0 8 0C8 0 2.99355 6.59222e-08 1.75484 0.359447C1.05806 0.552995 0.516129 1.13364 0.335484 1.88018C0 3.23502 0 6 0 6C0 6 0 8.79263 0.335484 10.1198C0.516129 10.8664 1.05806 11.447 1.75484 11.6406C2.99355 12 8 12 8 12C8 12 13.0065 12 14.2452 11.6406C14.9419 11.447 15.4839 10.8664 15.6645 10.1198C16 8.79263 16 6 16 6C16 6 16 3.23502 15.6645 1.88018ZM6.4 8.57143V3.42857L10.5548 6L6.4 8.57143Z" />
                   </svg>
-                </a>
-                <a
+                </A>
+                <A
                   href="javascript:void(0)"
                   class="text-dark hover:bg-primary hover:border-primary mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-[#E5E5E5] hover:text-white sm:mr-4 lg:mr-3 xl:mr-4"
                 >
@@ -231,7 +231,7 @@ const Footer: Component = () => {
                   >
                     <path d="M13.0214 0H1.02084C0.453707 0 0 0.451613 0 1.01613V12.9839C0 13.5258 0.453707 14 1.02084 14H12.976C13.5432 14 13.9969 13.5484 13.9969 12.9839V0.993548C14.0422 0.451613 13.5885 0 13.0214 0ZM4.15142 11.9H2.08705V5.23871H4.15142V11.9ZM3.10789 4.3129C2.42733 4.3129 1.90557 3.77097 1.90557 3.11613C1.90557 2.46129 2.45002 1.91935 3.10789 1.91935C3.76577 1.91935 4.31022 2.46129 4.31022 3.11613C4.31022 3.77097 3.81114 4.3129 3.10789 4.3129ZM11.9779 11.9H9.9135V8.67097C9.9135 7.90323 9.89082 6.8871 8.82461 6.8871C7.73571 6.8871 7.57691 7.74516 7.57691 8.60323V11.9H5.51254V5.23871H7.53154V6.16452H7.55423C7.84914 5.62258 8.50701 5.08065 9.52785 5.08065C11.6376 5.08065 12.0232 6.43548 12.0232 8.2871V11.9H11.9779Z" />
                   </svg>
-                </a>
+                </A>
               </div>
               <p class="text-body-color text-base">&copy; 2025 Camprotec</p>
             </div>

diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import { NavLink } from "@solidjs/router";
+import { A } from "@solidjs/router";
 import { useCartContext } from "../../context/CartContext";
 import NavActive from "./NavActive";
 
@@ -17,9 +17,9 @@ const Navbar: Component<{}> = () => {
     <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">
-          <a href="/" class="flex items-center">
+          <A href="/" class="flex items-center">
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
-          </a>
+          </A>
           <div class="flex items-center md:order-2">
             <NavActive
               title="Order"

diff --git a/client/src/pages/cart.tsx b/client/src/pages/cart.tsx
@@ -1,5 +1,6 @@
 import { Component, createEffect, createSignal, For, Show } from "solid-js";
 import { useCartContext } from "../context/CartContext";
+import { A } from "@solidjs/router";
 
 type FormData = {
   fullname: string;
@@ -37,15 +38,15 @@ const Cart = () => {
           <div>
             <div>
               {cartItems.length === 0 ? (
-                <a href="/products" class=" text-center font-bold text-red-500">
+                <A href="/products" class=" text-center font-bold text-red-500">
                   <div class="flex justify-center mt-16">
                     <img
                       class="w-64"
                       src="/images/undraw_empty_cart_co35.svg"
                     />
                   </div>
                   <p class="pt-12">Your cart is Empty !</p>
-                </a>
+                </A>
               ) : (
                 <div>
                   <div class="grid md:grid-cols-5 md:gap-20 mt-12 ">
@@ -181,7 +182,7 @@ const Cart = () => {
                             );
                           }}
                         </For>
-                        <a href="/products">
+                        <A href="/products">
                           <button
                             type="button"
                             class="w-full rounded-full flex items-center text-center justify-center py-3 px-5 mt-9 text-sm font-medium text-gray-600 focus:outline-none bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
@@ -197,7 +198,7 @@ const Cart = () => {
                             </svg>
                             More Products
                           </button>
-                        </a>
+                        </A>
                       </div>
                     </div>
 

diff --git a/client/src/pages/favorite.tsx b/client/src/pages/favorite.tsx
@@ -1,3 +1,4 @@
+import { A } from "@solidjs/router";
 import { Component } from "solid-js";
 
 const Favorite: Component = () => {
@@ -12,12 +13,12 @@ const Favorite: Component = () => {
           <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
+          <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>
+          </A>
         </div>
       </div>
     </section>