feat(project): add skeleton UI

public/locales/ar/itemsPage.json

@@ -9,5 +9,6 @@
   "page": "صفحة",
   "of": "من",
   "relatedItems": "العناصر المماثلة",
-  "contactCredentials": "بيانات الاتصال"
+  "contactCredentials": "بيانات الاتصال",
+  "noRelatedItems": "لم يتم العثور على عناصر ذات صلة"
 }

public/locales/en/itemsPage.json

@@ -9,5 +9,6 @@
   "page": "Page",
   "of": "of",
   "relatedItems": "Related Items",
-  "contactCredentials": "Contact Credentials"
+  "contactCredentials": "Contact Credentials",
+  "noRelatedItems": "No related items found"
 }

public/locales/fr/itemsPage.json

@@ -9,5 +9,6 @@
   "page": "Page",
   "of": "sur",
   "relatedItems": "Articles similaires",
-  "contactCredentials": "Informations du contact"
+  "contactCredentials": "Informations du contact",
+  "noRelatedItems": "Aucun élément similaire trouvé"
 }

public/locales/tr/itemsPage.json

@@ -9,5 +9,6 @@
   "page": "Sayfa ",
   "of": "/",
   "relatedItems": "Benzer Ürünler",
-  "contactCredentials": "İletişim Kimlik Bilgileri"
+  "contactCredentials": "İletişim Kimlik Bilgileri",
+  "noRelatedItems": "İlgili öğe bulunamadı"
 }

src/components/AddItemForm/AddItemFormPlaceholder.jsx

@@ -0,0 +1,23 @@
+function AddItemFormPlaceholder() {
+  return (
+    <div className='md:max-w-lg flex flex-col items-center gap-4 mx-auto'>
+      <div className='w-[80%] h-[30px] rounded-full bg-gray-300 animate-pulse mb-6' />
+      <div className='w-[100%] h-[50px] rounded-full bg-gray-300 animate-pulse' />
+      <div className='w-[100%] h-[50px] rounded-full bg-gray-300 animate-pulse' />
+      <div className='w-[100%] h-[50px] rounded-full bg-gray-300 animate-pulse' />
+      <div className='w-[100%] h-[120px] rounded-md bg-gray-300 animate-pulse' />
+
+      <div className='w-full flex flex-col md:flex-row gap-4'>
+        <div className='w-[100%] h-[40px] rounded-md bg-gray-300 animate-pulse' />
+        <div className='w-[100%] h-[40px] rounded-md bg-gray-300 animate-pulse' />
+        <div className='w-[100%] h-[40px] rounded-md bg-gray-300 animate-pulse' />
+      </div>
+      <div className='w-full flex flex-col md:flex-row gap-4'>
+        <div className='w-[100%] h-[50px] rounded-md bg-gray-300 animate-pulse' />
+        <div className='w-[100%] h-[50px] rounded-md bg-gray-300 animate-pulse' />
+      </div>
+    </div>
+  );
+}
+
+export default AddItemFormPlaceholder;

src/components/AddItemForm/index.jsx

@@ -98,7 +98,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
   return (
     <ProtectedLayout>
       <section className='relative md:max-w-lg mx-auto'>
-        <form onSubmit={formik.handleSubmit} className='flex flex-col gap-3'>
+        <form onSubmit={formik.handleSubmit} className='flex flex-col gap-1'>
           <h1 className='text-3xl font-black text-center'>
             {t("addItem:addItem")}
           </h1>
@@ -124,7 +124,6 @@ function AddItemForm({ t, initialLocale, categories, states }) {
             handleBlur={formik.handleBlur}
             error={formik.errors.title}
             touched={formik.touched.title}
-            sm
           />
           <SelectInput
             name='category'
@@ -134,7 +133,6 @@ function AddItemForm({ t, initialLocale, categories, states }) {
             value={formik.values.category}
             touched={formik.touched.category}
             error={formik.errors.category}
-            sm
           />
           <SelectInput
             name='location'
@@ -144,7 +142,6 @@ function AddItemForm({ t, initialLocale, categories, states }) {
             value={formik.values.location}
             touched={formik.touched.location}
             error={formik.errors.location}
-            sm
           />
           <TextAreaInput
             name='description'
@@ -172,11 +169,11 @@ function AddItemForm({ t, initialLocale, categories, states }) {
             onChange={(e) => {
               setImages(Array.from(e.target.files));
             }}
-            className='file-input bg-base-300'
+            className='file-input bg-base-200'
             id='file-upload'
             multiple
           />
-          <div className='form-control'>
+          <div className='form-control my-2'>
             <div className='label'>
               <span className='label-text'>
                 <span className='text-error'>*</span> {t("addItem:listingType")}
@@ -193,7 +190,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
                   : ""}
               </span>
             </div>
-            <div className='flex flex-col md:flex-row gap-2 md:justify-between md:items-center'>
+            <div className='flex flex-col md:flex-row gap-2 md:justify-between md:items-center my-2'>
               {listingTypes.map((listingKey, i) => (
                 <ListingTypeButton
                   key={i}
@@ -205,7 +202,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
               ))}
             </div>
           </div>
-          <div className='flex flex-col md:flex-row gap-2 justify-center mt-2'>
+          <div className='flex flex-col md:flex-row gap-2 justify-center my-4'>
             <button
               type='submit'
               className='btn btn-md rounded-xl btn-secondary bg-opacity-50 text-black flex-1 md:self-center'
@@ -214,7 +211,7 @@ function AddItemForm({ t, initialLocale, categories, states }) {
             </button>
             <Link
               href='/items'
-              className='btn btn-md rounded-xl btn-outline flex-1 md:self-center'
+              className='btn btn-md rounded-xl btn-ghost border-gray-200 flex-1 md:self-center'
             >
               {t("common:buttons:cancel")}
             </Link>

src/components/Carousel/CarouselPlaceholder.jsx

@@ -0,0 +1,19 @@
+function CarouselPlaceholder() {
+  return (
+    <div className='w-full h-full flex items-center justify-center'>
+      <div className='w-[95%] p-8 flex flex-col lg:flex-row justify-between h-[90%] bg-gray-300 animate-pulse mx-auto rounded-2xl'>
+        <div className='lg:w-[40%] w-full mt-20'>
+          <div className='w-[80%] h-[50px] bg-base-100 animate-pulse rounded-full mt-20'></div>
+          <div className='w-[100px] h-[40px] bg-base-100 animate-pulse rounded-full mt-4'></div>
+        </div>
+        <div className='flex gap-4 mt-auto lg:w-[60%] w-full items-center justify-center'>
+          <div className='lg:w-[50%] lg:h-[320px] w-[50px] h-[50px] bg-base-100 animate-pulse rounded-xl mt-4'></div>
+          <div className='lg:w-[50%] lg:h-[320px] w-[50px] h-[50px] bg-base-100 animate-pulse rounded-xl mt-4'></div>
+          <div className='lg:w-[50%] lg:h-[320px] w-[50px] h-[50px] bg-base-100 animate-pulse rounded-xl mt-4'></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CarouselPlaceholder;

src/components/ItemDetailsCard/ItemDetailsCardPlaceholder.jsx

@@ -0,0 +1,16 @@
+function ItemDetailsCardPlaceholder() {
+  return (
+    <div className='lg:w-[850px] flex w-[100%] mx-auto h-[400px] lg:rounded-2xl animate-pulse'>
+      <div className='w-[40%] lg:block hidden h-full bg-gray-300 animate-pulse lg:rounded-2xl'></div>
+      <div className='w-[60%] p-4 lg:flex lg:ml-4 hidden h-full lg:rounded-2xl flex-col gap-4'>
+        <div className='w-[50%] mt-4 h-[20px] rounded-full bg-gray-300 animate-pulse'></div>
+        <div className='w-[60%] mt-4 h-[15px] rounded-full bg-gray-300 animate-pulse'></div>
+        <div className='w-[60%] mt-10 h-[10px] rounded-full bg-gray-300 animate-pulse'></div>
+        <div className='w-[60%] mt-4 h-[10px] rounded-full bg-gray-300 animate-pulse'></div>
+        <div className='w-[60%] mt-4 h-[10px] rounded-full bg-gray-300 animate-pulse'></div>
+      </div>
+    </div>
+  );
+}
+
+export default ItemDetailsCardPlaceholder;

src/components/ItemDetailsCard/__test__/__snapshots__/ItemDetailsCard.test.js.snap

@@ -553,7 +553,7 @@ exports[`renders correctly 1`] = `
     id="CardContent"
   >
     <h1
-      className="card-title text-3xl"
+      className="card-title text-3xl capitalize"
     >
       Item Details title
     </h1>

src/components/ItemDetailsCard/index.jsx

@@ -97,7 +97,7 @@ function ItemDetailsCard({
         </div>
       </figure>
       <div id='CardContent' className='card-body flex-1'>
-        <h1 className='card-title text-3xl'>{title}</h1>
+        <h1 className='card-title text-3xl capitalize'>{title}</h1>
         <div className='flex gap-2 items-center'>
           <span className='flex gap-1 text-gray-400 text-sm font-light items-center'>
             <MdShareLocation className='text-xl' /> {location}

src/components/Items/ItemsPlaceholder.jsx

@@ -0,0 +1,18 @@
+function ItemsPlaceholder() {
+  return (
+    <div className='flex flex-col lg:flex-row py-24 px-8 gap-8 items-start min-h-screen'>
+      <div className='lg:w-[30%] h-[350px] w-full rounded-xl bg-gray-300 animate-pulse'></div>
+      <div className='flex flex-col gap-8 flex-1 w-full'>
+        <div className='rounded-xl h-[80px] w-[full] bg-gray-300 animate-pulse'></div>
+        <div className='rounded-xl w-[full] flex flex-wrap p-4 gap-4'>
+          <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+          <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+          <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+          <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ItemsPlaceholder;

src/components/ItemsCarousel/ItemsCarouselPlaceholder.jsx

@@ -0,0 +1,11 @@
+function ItemsCarouselPlaceholder() {
+  return (
+    <div className='flex gap-6'>
+      <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+      <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+      <div className='w-[200px] h-[250px] rounded-xl bg-gray-300 animate-pulse'></div>
+    </div>
+  );
+}
+
+export default ItemsCarouselPlaceholder;

src/components/LandingPage/BlogsSection/BlogsSectionPlaceholder.jsx

@@ -0,0 +1,22 @@
+function BlogsSectionPlaceholder() {
+  return (
+    <div className='flex max-w-6xl flex-col flex-wrap gap-8 justify-center items-center mx-auto w-full min-h-screen p-8'>
+      <div className='flex justify-between w-full'>
+        <div className='w-[300px] h-[35px] rounded-full bg-gray-300 animate-pulse mb-8'></div>
+        <div className='w-[120px] h-[40px] rounded-full bg-gray-300 animate-pulse mb-8'></div>
+      </div>
+      <div className='w-full flex flex-wrap justify-center items-center gap-6 text-center'>
+        <div className='flex-1 min-w-full flex-grow-0 h-80 bg-gray-300 animate-pulse rounded-2xl'></div>
+
+        {[2, 3].map((i) => (
+          <div
+            key={i}
+            className='flex-1 min-w-[300px] h-80 bg-gray-300 animate-pulse rounded-2xl'
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default BlogsSectionPlaceholder;

src/components/LandingPage/BlogsSection/__test__/BlogsSection.test.js

@@ -1,6 +1,6 @@
 import renderer from "react-test-renderer";
 
-import BlogsSection from "../BlogsSection";
+import BlogsSection from "..";
 
 it("renders correctly", () => {
   const mockBlogs = [

src/components/LandingPage/CausesSection/CausesSectionPlaceholder.jsx

@@ -0,0 +1,17 @@
+function CausesSectionPlaceholder() {
+  return (
+    <div className='flex flex-col flex-wrap gap-8 justify-center items-center bg-base-100 w-full min-h-screen p-8'>
+      <div className='w-[300px] h-[30px] rounded-full bg-gray-300 animate-pulse mb-8'></div>
+      <div className='w-full flex flex-wrap justify-center items-center gap-6 text-center'>
+        {[1, 2, 3].map((i) => (
+          <div
+            key={i}
+            className='flex-1 min-w-[300px] h-96 flex-grow bg-gray-300 animate-pulse rounded-2xl'
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CausesSectionPlaceholder;

src/components/LandingPage/HeroSection/HeroSectionPlaceholder.jsx

@@ -0,0 +1,17 @@
+function HeroSectionPlaceholder() {
+  return (
+    <div className='h-screen w-full items-center gap-2 p-10 flex'>
+      <div className='w-[40%] flex flex-col gap-4'>
+        <div className='bg-gray-300 animate-pulse w-[80%] h-[40px] rounded-full'></div>
+        <div className='bg-gray-300 animate-pulse w-[60%] h-[40px] rounded-full'></div>
+        <div className='bg-gray-300 animate-pulse w-[90%] h-[10px] rounded-full'></div>
+        <div className='bg-gray-300 animate-pulse w-[80%] h-[10px] rounded-full'></div>
+        <div className='bg-gray-300 animate-pulse w-[60%] h-[10px] rounded-full'></div>
+        <div className='bg-gray-300 animate-pulse w-[150px] h-[48px] rounded-full mt-2'></div>
+      </div>
+      <div className='w-[60%] rounded-xl bg-gray-300 animate-pulse h-full'></div>
+    </div>
+  );
+}
+
+export default HeroSectionPlaceholder;

src/components/LandingPage/OurPartnersSection/OurPartnersSectionPlaceholder.jsx

@@ -0,0 +1,29 @@
+import Container from "@/components/container";
+
+function OurPartnersSectionPlaceholder() {
+  const arrayOne = [1, 2, 3, 4, 5, 6];
+
+  return (
+    <Container className='text-center mt-24 flex flex-col items-center justify-center gap-10'>
+      <div className='w-[300px] h-[35px] rounded-full bg-gray-300 animate-pulse mb-8'></div>
+      <div className='flex gap-4 max-w-4xl overflow-hidden'>
+        {arrayOne.map((i) => (
+          <div
+            key={i}
+            className='w-[180px] h-[75px] rounded-md bg-gray-300 animate-pulse'
+          ></div>
+        ))}
+      </div>
+      <div className='flex gap-4 max-w-4xl overflow-hidden'>
+        {arrayOne.map((i) => (
+          <div
+            key={i}
+            className='w-[180px] h-[75px] rounded-md bg-gray-300 animate-pulse'
+          ></div>
+        ))}
+      </div>
+    </Container>
+  );
+}
+
+export default OurPartnersSectionPlaceholder;

src/components/LandingPage/PopularItemsSection/PopularItemsSectionPlaceholder.jsx

@@ -0,0 +1,17 @@
+function PopularItemsSectionPlaceholder() {
+  return (
+    <div className='flex max-w-6xl flex-col flex-wrap gap-8 justify-center items-center mx-auto w-full min-h-screen p-8'>
+      <div className='w-[300px] h-[30px] rounded-full bg-gray-300 animate-pulse mb-8'></div>
+      <div className='w-full flex flex-wrap justify-center items-center gap-6 text-center'>
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className='flex-1 min-w-[250px] flex-grow-0 h-80 bg-gray-300 animate-pulse rounded-2xl'
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default PopularItemsSectionPlaceholder;

src/components/LandingPage/StatisticsSection/StatisticsSectionPlaceholder.jsx

@@ -0,0 +1,12 @@
+function StatisticsSectionPlaceholder() {
+  return (
+    <div className='h-[70vh] w-[90vw] gap-8 items-center justify-center mx-auto rounded-3xl my-10 bg-gray-300 animate-pulse flex flex-col lg:flex-row flex-wrap'>
+      <div className='w-72 h-80 bg-base-200 rounded-3xl animate-pulse'></div>
+      <div className='w-72 h-80 bg-base-200 rounded-3xl animate-pulse'></div>
+      <div className='w-72 h-80 bg-base-200 rounded-3xl animate-pulse'></div>
+      <div className='w-72 h-80 bg-base-200 rounded-3xl animate-pulse'></div>
+    </div>
+  );
+}
+
+export default StatisticsSectionPlaceholder;

src/components/Map/MapPlaceholder.jsx

@@ -0,0 +1,17 @@
+function MapPlaceholder() {
+  return (
+    <div className='h-screen flex gap-10 max-w-5xl mx-auto items-center'>
+      <div className='w-[50%] flex flex-col gap-4 items-center'>
+        <div className='w-[80%] h-[25px] rounded-full bg-gray-300 animate-pulse' />
+        <div className='w-[30%] h-[30px] rounded-full bg-gray-300 animate-pulse' />
+        <div className='w-[80%] h-[25px] rounded-full bg-gray-300 animate-pulse' />
+        <div className='w-[30%] h-[30px] rounded-full bg-gray-300 animate-pulse' />
+        <div className='w-[80%] h-[25px] rounded-full bg-gray-300 animate-pulse' />
+        <div className='w-[30%] h-[30px] rounded-full bg-gray-300 animate-pulse' />
+      </div>
+      <div className='w-[40%] h-[450px] rounded-3xl bg-gray-300 animate-pulse' />
+    </div>
+  );
+}
+
+export default MapPlaceholder;

src/components/PageCover/PageCoverPlaceholder.jsx

@@ -0,0 +1,22 @@
+function PageCoverPlaceholder() {
+  return (
+    <div className='w-screen h-screen flex items-center justify-center'>
+      <div className='w-[50%] flex flex-col gap-8'>
+        <div className='w-[50%] h-[30px] mx-auto rounded-full bg-gray-300 animate-pulse' />
+        <div className='flex flex-col gap-2 items-center'>
+          <div className='w-[70%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[78%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[68%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[72%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[75%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[65%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[72%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[68%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+          <div className='w-[20%] h-[10px] rounded-full bg-gray-300 animate-pulse' />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PageCoverPlaceholder;