🚑 Add .env files and update paths for assets and public URLs

.env.development

@@ -0,0 +1 @@
+VITE_PUBLIC_URL=/wdb-sandbox/

.env.production

@@ -0,0 +1,2 @@
+VITE_PUBLIC_URL=/wdb-sandbox/
+VITE_TAILWIND_ASSETS_URL=/wdb-sandbox/

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://mkmksgit.github.io/wdb-sandbox/",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "vite --mode development",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
     "prettier": "prettier --write .",

src/Components/Footer/Footer.tsx

@@ -32,9 +32,9 @@ const Footer = (props: FooterProps) => {
         <div className={'flex gap-2'}>
           <p className={'text-caption'}>Powerd By</p>
           <div className={'flex items-center gap-2'}>
-            <img src="/assets/skooldio-logo.png" alt="Skooldio" />
+            <img src={`${import.meta.env.VITE_PUBLIC_URL}assets/skooldio-logo.png`} alt="Skooldio" />
             <div className="inline-block w-px self-stretch bg-neutral-100"></div>
-            <img src="/assets/web-dev-logo.png" alt="Web Development Bootcamp" />
+            <img src={`${import.meta.env.VITE_PUBLIC_URL}assets/web-dev-logo.png`} alt="Web Development Bootcamp" />
           </div>
         </div>
       </div>

src/Components/NavBar/NavBar.tsx

@@ -1,5 +1,6 @@
 type NavBarProps = {
   tabList: string[];
+  // eslint-disable-next-line no-unused-vars
   handleClickTab: (tab: string) => void;
   handleClickLogo: () => void;
   rightAdornment?: React.ReactNode;
@@ -13,7 +14,11 @@ const NavBar = (props: NavBarProps) => {
       <div id="navbar-content" className="flex justify-between items-center">
         <div id="left" className="flex gap-10 items-center">
           <div id="logo" className="cursor-pointer flex gap-2.5 items-center" onClick={handleClickLogo}>
-            <img className="w-[36px] h-[36px] object-contain" src="/assets/logo.svg" alt="logo" />
+            <img
+              className="w-[36px] h-[36px] object-contain"
+              src={`${import.meta.env.VITE_PUBLIC_URL}assets/logo.svg`}
+              alt="logo"
+            />
             <p className="text-subHeading">WDB</p>
           </div>
           <div className="flex gap-6">

src/Routes/Home/Home.tsx

@@ -4,10 +4,11 @@ import CollectionDetails from '@/Routes/Home/Containers/CollectionDetails';
 const Home = () => {
   return (
     <div>
-      <div
-        id="home-cover"
-        className={'h-[420px] bg-cover bg-center overflow-hidden bg-[url("assets/images/cover.png")]'}
-      ></div>
+      <img
+        className="w-full h-[420px] object-cover object-center overflow-hidden"
+        src={`${import.meta.env.VITE_PUBLIC_URL}assets/images/cover.png`}
+        alt="cover of wdb shop, 5 people walk on the street with colorful cloths"
+      />
       <div id="home-container" className={'px-40 pt-24 pb-40 flex flex-col justify-center'}>
         <CollectionDetails />
         <div id="home-product">

src/Routes/ProductList/ProductList.tsx

@@ -40,7 +40,7 @@ const ProductList = () => {
           <p className={'text-h5'}>{title}</p>
           <div id="product-list-sort-box"></div>
         </div>
-        <div className={`grid grid-cols-${COLUMNS_PER_ROW} gap-x-10 gap-y-[60px]`}>
+        <div className={`grid grid-cols-4 gap-x-10 gap-y-[60px]`}>
           {currentProducts.map((product) => {
             const { id, name, description, price, promotionalPrice, ratings, imageUrls } = product;
             return (

tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es6",
     "useDefineForClassFields": true,
     "lib": ["es6", "DOM", "DOM.Iterable"],
-    "module": "es6",
+    "module": "esnext",
     "skipLibCheck": true,
 
     /* Bundler mode */