Changes to be committed:

new file: client/public/images/mission-2.png new file: client/public/images/policy.png modified: client/public/images/shopping.png new file: client/public/images/vision.png new file: client/src/components/Image.tsx new file: client/src/components/cards/RelatedCard.tsx modified: client/src/components/layouts/Navbar.tsx modified: client/src/pages/about.tsx modified: client/src/pages/home.tsx modified: client/src/pages/news/index.tsx modified: client/src/pages/news/singlePage.tsx modified: client/src/pages/products/details.tsx modified: client/src/pages/products/index.tsx
koompi · Aug 5, 2023 · 429691c · 429691c
1 parent dcffb5d
commit 429691c
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 184 deletions.
diff --git a/client/public/images/mission-2.png b/client/public/images/mission-2.png
diff --git a/client/public/images/policy.png b/client/public/images/policy.png
diff --git a/client/public/images/shopping.png b/client/public/images/shopping.png
diff --git a/client/public/images/vision.png b/client/public/images/vision.png
diff --git a/client/src/components/Image.tsx b/client/src/components/Image.tsx
@@ -0,0 +1,23 @@
+import { Component } from "solid-js";
+
+export type Image = {
+  image: String;
+  name: String;
+  width: String;
+  heigh: String;
+  is_scale: Boolean;
+};
+
+const Image: Component<Image> = (props) => {
+  return (
+    <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block">
+      <img
+        src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+        alt="Two each of gray, white, and black shirts laying flat."
+        class="h-full w-full object-cover object-center hover:scale-125 duration-150"
+      />
+    </div>
+  );
+};
+
+export default Image;
diff --git a/client/src/components/cards/RelatedCard.tsx b/client/src/components/cards/RelatedCard.tsx
@@ -0,0 +1,34 @@
+import { Component } from "solid-js";
+import { NavLink } from "@solidjs/router";
+
+export type NewsData = {
+  id: string;
+  title: string;
+  image: string;
+  des: string;
+  author: string;
+};
+interface Props {
+  props: NewsData;
+}
+
+const RelatedCard: Component<Props> = ({ props }) => {
+  return (
+    <NavLink href={`/news/${props.id}`}>
+      <div class="lg:w-full mt-2 ">
+        <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"
+            class="flex-shrink-0 rounded-lg w-24 h-24 object-cover object-center sm:mb-0 mb-4"
+            src={props?.image}
+          />
+          <div class="flex-grow sm:pl-8">
+            <p class="mb-4">{props.title}</p>
+          </div>
+        </div>
+      </div>
+    </NavLink>
+  );
+};
+
+export default RelatedCard;
diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
@@ -6,103 +6,6 @@ const Navbar: Component = () => {
   const { cartItems } = useCartContext();
   return (
     <div>
-      {/* <div class="">
-        <div class="md:px-44 navbar sticky top-0 bg-white z-10 backdrop-blur-3xl opacity-90 ">
-          <div class="flex-1">
-            <NavLink href="/">
-              <img
-                class="md:w-24 w-24"
-                src="/images/logo.png"
-                alt="Solid logo"
-              />
-            </NavLink>
-          </div>
-          <div class="flex-none md:gap-6 gap-3 font-bold">
-            <div class="md:flex items-center hidden">
-              <input
-                type="text"
-                placeholder="Search"
-                class="w-full border py-2 px-8 rounded-full bg-white-300"
-              />
-              <img class="w-4 absolute ml-2" src="/images/search.png" />
-            </div>
-            <img class="w-4 md:hidden" src="/images/search.png" />
-            <div class="flex items-center">
-              <div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor"
-                  class="w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-                  />
-                </svg>
-              </div>
-              <div class="md:ml-2 md:block hidden ">
-                <NavLink href="/favorite">Favorite</NavLink>
-              </div>
-            </div>
-
-            <NavLink href="/cart" class="md:ml-2 md:mr-0 mr-3">
-              <div class="flex items-center space-x-2">
-                <div class="indicator">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
-                    />
-                  </svg>
-
-                  <span class="badge badge-xs badge-primary indicator-item">
-                    {cartItems.length}
-                  </span>
-                </div>
-                <p class="md:block hidden">Cart</p>
-              </div>
-            </NavLink>
-
-            <div class="dropdown dropdown-end">
-              <label tabindex="0" class="btn btn-ghost btn-circle avatar">
-                <div class="w-10 rounded-full">
-                  <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
-                </div>
-              </label>
-              <ul
-                tabindex="0"
-                class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-white rounded-box w-52"
-              >
-                <li>
-                  <a class="justify-between">
-                    Profile
-                    <span class="badge">New</span>
-                  </a>
-                </li>
-                <li>
-                  <a>Settings</a>
-                </li>
-                <li>
-                  <a>Logout</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </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">
@@ -186,10 +89,10 @@ const Navbar: Component = () => {
               </li>
               <li>
                 <a
-                  href="#contact"
+                  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"
                 >
-                  Contact
+                  News
                 </a>
               </li>
             </ul>

diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
@@ -1,4 +1,4 @@
-import { Component, For, Show } from "solid-js";
+import { Component, For } from "solid-js";
 import Members from "../data/Members";
 import MemberCard from "../components/cards/Member-cart";
 const About: Component = () => {
@@ -88,7 +88,7 @@ export const Missions: Component = () => {
                     <div class="w-full items-center md:flex">
                       <div class="relative mb-12 w-full max-w-[310px] md:mr-12 md:mb-0 md:max-w-[250px] lg:mr-14 lg:max-w-[280px] 2xl:mr-16">
                         <img
-                          src="https://cdn.tailgrids.com/2.0/image/marketing/images/testimonials/testimonial-01/image-01.jpg"
+                          src="../../public/images/mission-2.png"
                           alt="image"
                           class="w-full"
                         />
@@ -444,7 +444,7 @@ export const Missions: Component = () => {
                       </div>
                       <div class="relative mb-12 w-full max-w-[310px] md:ml-12 md:mb-0 md:max-w-[250px] lg:ml-24 lg:max-w-[280px] 2xl:ml-24">
                         <img
-                          src="https://cdn.tailgrids.com/2.0/image/marketing/images/testimonials/testimonial-01/image-01.jpg"
+                          src="../../public/images/vision.png"
                           alt="image"
                           class="w-full"
                         />
@@ -766,7 +766,7 @@ export const Missions: Component = () => {
                     <div class="w-full items-center md:flex">
                       <div class="relative mb-12 w-full max-w-[310px] md:mr-12 md:mb-0 md:max-w-[250px] lg:mr-14 lg:max-w-[280px] 2xl:mr-16">
                         <img
-                          src="https://cdn.tailgrids.com/2.0/image/marketing/images/testimonials/testimonial-01/image-01.jpg"
+                          src="../../public/images/policy.png"
                           alt="image"
                           class="w-full"
                         />

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
@@ -500,7 +500,7 @@ export const Contact: Component = () => {
             ></textarea>
           </div>
           <button class="text-white rounded-xl bg-primary border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 text-lg">
-            Button
+            Contact
           </button>
         </div>
       </div>

diff --git a/client/src/pages/news/index.tsx b/client/src/pages/news/index.tsx
@@ -41,7 +41,7 @@ export const Banner: Component = () => {
                 />
               </div>
             </div>
-            <div class="grid md:grid-cols-4 gap-4 mt-12">
+            <div class=" grid md:grid-cols-4 gap-4 mt-12">
               <For each={NewsData}>
                 {(NewData) => {
                   return <NewsCard props={NewData} />;

diff --git a/client/src/pages/news/singlePage.tsx b/client/src/pages/news/singlePage.tsx
@@ -1,11 +1,13 @@
-import { Component } from "solid-js";
+import { Component, For } from "solid-js";
+import RelatedCard from "../../components/cards/RelatedCard";
+import NewsData from "../../data/News";
 
 const SinglePageNews: Component = () => {
   return (
     <>
       <main class="pt-8 pb-16 lg:pt-16 lg:pb-24 bg-white dark:bg-gray-900">
-        <div class="grid grid-cols-5 justify-between px-4 mx-auto max-w-screen-xl ">
-          <article class="col-span-4 mx-auto w-full max-w-2xl format format-sm sm:format-base lg:format-lg format-blue dark:format-invert">
+        <div class="grid grid-cols-3  gap-3 justify-between px-4 mx-auto max-w-screen-xl ">
+          <article class="col-span-2 mx-auto w-full max-w-2xl format format-sm sm:format-base lg:format-lg format-blue dark:format-invert">
             <header class="mb-4 lg:mb-6 not-format">
               <h1 class="mb-4 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white">
                 King Norodom Sihamoni’s Birthday
@@ -506,9 +508,13 @@ const SinglePageNews: Component = () => {
               </article>
             </section>
           </article>
-          {/* <div class="col-span-auto w-full bg-gray-50 p-3 rounded-xl h-60">
-            <h1>hello world</h1>
-          </div> */}
+          <div class="col-span-auto w-full p-3 rounded-xl ">
+            <For each={NewsData}>
+              {(NewData) => {
+                return <RelatedCard props={NewData} />;
+              }}
+            </For>
+          </div>
         </div>
       </main>
     </>