From 363c7f8f320f7e1b1b05064485d3936225c0f759 Mon Sep 17 00:00:00 2001
From: Abolfazl Jamshidi <abolfazljamshididev@gmail.com>
Date: Tue, 4 Jun 2024 16:13:13 +0330
Subject: [PATCH] update images using absolute path imports

---
 src/app/(about-me)/_components/AboutMeHero.tsx | 9 +++++----
 src/app/(about-me)/_components/Company.tsx     | 3 ++-
 src/app/(home)/_components/HomeHeroSection.tsx | 5 ++---
 src/components/Navigation/Navigation.tsx       | 7 ++-----
 src/constants/index.ts                         | 7 ++++++-
 tsconfig.json                                  | 3 ++-
 6 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/app/(about-me)/_components/AboutMeHero.tsx b/src/app/(about-me)/_components/AboutMeHero.tsx
index f58c55d..d517724 100644
--- a/src/app/(about-me)/_components/AboutMeHero.tsx
+++ b/src/app/(about-me)/_components/AboutMeHero.tsx
@@ -1,3 +1,4 @@
+import { heroImage } from "@/constants";
 import { Fira_Code } from "next/font/google";
 import Image from "next/image";
 const firaCode = Fira_Code({
@@ -23,7 +24,7 @@ const AboutMeHeroSection = () => {
         <div className="mx-auto grid grid-cols-2 grid-rows-2 items-center justify-items-center sm:w-1/2 md:w-full md:grid-cols-4 md:grid-rows-1">
           <figure className="relative left-10 top-6 h-[165px] w-[150px] -rotate-[13.84deg] self-center overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:top-0 md:h-[275px] md:w-[250px] md:hover:left-8">
             <Image
-              src={"/images/hero-img.jpeg"}
+              src={heroImage}
               fill
               alt="photo"
               className="inset-0 h-full w-full object-cover object-center shadow-heroImage"
@@ -32,7 +33,7 @@ const AboutMeHeroSection = () => {
           </figure>
           <figure className="relative -left-12 top-6 h-[165px] w-[150px] rotate-[7.39deg] overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:left-0 md:top-0 md:h-[275px] md:w-[250px] md:hover:left-4">
             <Image
-              src={"/images/hero-img.jpeg"}
+              src={heroImage}
               fill
               alt="photo"
               className="h-full w-full object-cover object-center shadow-heroImage"
@@ -41,7 +42,7 @@ const AboutMeHeroSection = () => {
           </figure>
           <figure className="relative -top-4 left-10 h-[165px] w-[150px] rotate-[7.39deg] overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:-left-2 md:top-0 md:h-[275px] md:w-[250px] md:-rotate-[13.84deg] md:hover:-left-4">
             <Image
-              src={"/images/hero-img.jpeg"}
+              src={heroImage}
               fill
               alt="photo"
               className="h-full w-full object-cover object-center shadow-heroImage"
@@ -50,7 +51,7 @@ const AboutMeHeroSection = () => {
           </figure>
           <figure className="relative -left-12 -top-4 h-[165px] w-[150px] -rotate-[13.84deg] overflow-hidden rounded-20 transition-all duration-150 ease-in-out hover:z-10 md:-left-8 md:top-0 md:h-[275px] md:w-[250px] md:rotate-[7.39deg] md:hover:-left-4">
             <Image
-              src={"/images/hero-img.jpeg"}
+              src={heroImage}
               fill
               alt="photo"
               className="h-full w-full object-cover object-center shadow-heroImage"
diff --git a/src/app/(about-me)/_components/Company.tsx b/src/app/(about-me)/_components/Company.tsx
index 37f345f..cb2bb8b 100644
--- a/src/app/(about-me)/_components/Company.tsx
+++ b/src/app/(about-me)/_components/Company.tsx
@@ -1,3 +1,4 @@
+import { companyLogo } from "@/constants";
 import Image from "next/image";
 
 const Company = () => {
@@ -6,7 +7,7 @@ const Company = () => {
       <div className="flex items-center gap-x-4 md:gap-x-6">
         <figure className="relative h-[50px] w-[50px] overflow-hidden rounded-full border-primary group-hover:border-2 md:h-[80px] md:w-[80px]">
           <Image
-            src={"/images/company-logo.jpg"}
+            src={companyLogo}
             alt="company name"
             fill
             className="h-full w-full object-cover object-center"
diff --git a/src/app/(home)/_components/HomeHeroSection.tsx b/src/app/(home)/_components/HomeHeroSection.tsx
index bdfb931..f44685e 100644
--- a/src/app/(home)/_components/HomeHeroSection.tsx
+++ b/src/app/(home)/_components/HomeHeroSection.tsx
@@ -1,4 +1,4 @@
-import { NEXT_BASE_PATH } from "@/constants";
+import { heroImage } from "@/constants";
 import { Fira_Code } from "next/font/google";
 import Image from "next/image";
 
@@ -34,8 +34,7 @@ const HomeHeroSection = () => {
 
       <figure className="h-[320px] w-[250px] rotate-6 overflow-hidden rounded-20 shadow-heroImage2 transition-all duration-100 ease-linear hover:-rotate-2 sm:h-[370px] sm:w-[330px] md:order-2 md:h-[400px] md:w-[360px]">
         <Image
-          // src={`/images/hero-img.jpeg`}
-          src={`${NEXT_BASE_PATH}/images/hero-img.jpeg`}
+          src={heroImage}
           alt="arman photo"
           fill
           className="h-full w-full object-cover object-center"
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 422b324..02a587d 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -5,6 +5,7 @@ import { useTheme } from "next-themes";
 import Image from "next/image";
 import NavList from "./NavList";
 import ThemeSwitcher from "../ThemeSwitcher";
+import { logoDark, logoWhite } from "@/constants";
 
 const Navigation = () => {
   const { resolvedTheme } = useTheme();
@@ -14,11 +15,7 @@ const Navigation = () => {
       <nav className="mx-auto flex max-w-[800px] flex-wrap items-center justify-between">
         <div className="flex items-center gap-4">
           <Image
-            src={
-              resolvedTheme === "light"
-                ? "/images/sample-logo.svg"
-                : "/images/sample-logo-white.svg"
-            }
+            src={resolvedTheme === "light" ? logoWhite : logoDark}
             alt="logo"
             width={40}
             height={40}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index fe41a62..6f6fb25 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1 +1,6 @@
-export const NEXT_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
+import heroImage from "@/public/images/hero-img.jpeg";
+import companyLogo from "@/public/images/company-logo.jpg";
+import logoDark from "@/public/images/sample-logo.svg";
+import logoWhite from "@/public/images/sample-logo-white.svg";
+
+export { heroImage, companyLogo, logoDark, logoWhite };
diff --git a/tsconfig.json b/tsconfig.json
index 8178282..82508c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@/public*": ["./public/*"]
     },
     "types": ["vitest", "jsdom", "node", "@testing-library/jest-dom"]
   },