From bbb78e25c209e990919a6408826afc4bb0e297ad Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 12:44:18 +0200 Subject: [PATCH 01/10] refactor: rename files and directories Rename files and directories following the Code Conventions specified in the ./docs/ code_conventions.md file. --- app/account/cart/page.tsx | 2 +- app/account/wishlist/page.tsx | 2 +- app/demo/page.tsx | 14 +++++++------- app/page.tsx | 4 ++-- app/shop/[[...slug]]/page.tsx | 6 +++--- app/shop/brands/page.tsx | 2 +- app/shop/product/[id]/page.tsx | 4 ++-- .../{bookmarkButton.tsx => bookmark-button.tsx} | 0 .../cartDrawer.tsx => cart-drawer/index.tsx} | 2 +- .../item/index.tsx} | 4 ++-- .../item/styles.css} | 0 components/{cartDrawer => cart-drawer}/styles.css | 0 components/{cartItem.tsx => cart-item.tsx} | 2 +- .../commentCard.tsx => comment-card/index.tsx} | 0 .../{filterDropdown.tsx => filter-dropdown.tsx} | 0 components/layout/header.tsx | 2 +- .../account/cart/{cartPageClient.tsx => index.tsx} | 2 +- .../shop/{activeFilters.tsx => active-filters.tsx} | 0 .../{brandsAlphabet.tsx => brands-alphabet.tsx} | 0 ...ClientWrapper.tsx => brands-client-wrapper.tsx} | 4 ++-- .../{brandsContent.tsx => brands-content.tsx} | 0 ...{prodDetailTabs.tsx => product-detail-tabs.tsx} | 0 .../{productGallery.tsx => product-gallery.tsx} | 0 ...uctInfoSection.tsx => product-info-section.tsx} | 6 +++--- .../shop/{shopSidebar.tsx => shop-sidebar.tsx} | 2 +- components/{productCard.tsx => product-card.tsx} | 2 +- components/{productGrid.tsx => product-grid.tsx} | 2 +- ...iderSection.tsx => products-slider-section.tsx} | 2 +- ...searchResultItem.tsx => search-result-item.tsx} | 0 components/stepper/{stepper.tsx => index.tsx} | 2 +- components/stepper/{stepper.css => styles.css} | 0 31 files changed, 33 insertions(+), 33 deletions(-) rename components/{bookmarkButton.tsx => bookmark-button.tsx} (100%) rename components/{cartDrawer/cartDrawer.tsx => cart-drawer/index.tsx} (98%) rename components/{cartDrawer/item/cartDrawerItem.tsx => cart-drawer/item/index.tsx} (97%) rename components/{cartDrawer/item/cartDrawerItem.css => cart-drawer/item/styles.css} (100%) rename components/{cartDrawer => cart-drawer}/styles.css (100%) rename components/{cartItem.tsx => cart-item.tsx} (99%) rename components/{commentCard/commentCard.tsx => comment-card/index.tsx} (100%) rename components/{filterDropdown.tsx => filter-dropdown.tsx} (100%) rename components/pages/account/cart/{cartPageClient.tsx => index.tsx} (98%) rename components/pages/shop/{activeFilters.tsx => active-filters.tsx} (100%) rename components/pages/shop/brands/{brandsAlphabet.tsx => brands-alphabet.tsx} (100%) rename components/pages/shop/brands/{brandsClientWrapper.tsx => brands-client-wrapper.tsx} (93%) rename components/pages/shop/brands/{brandsContent.tsx => brands-content.tsx} (100%) rename components/pages/shop/product/{prodDetailTabs.tsx => product-detail-tabs.tsx} (100%) rename components/pages/shop/product/{productGallery.tsx => product-gallery.tsx} (100%) rename components/pages/shop/product/{productInfoSection.tsx => product-info-section.tsx} (97%) rename components/pages/shop/{shopSidebar.tsx => shop-sidebar.tsx} (98%) rename components/{productCard.tsx => product-card.tsx} (97%) rename components/{productGrid.tsx => product-grid.tsx} (97%) rename components/{productsSliderSection.tsx => products-slider-section.tsx} (98%) rename components/{searchResultItem.tsx => search-result-item.tsx} (100%) rename components/stepper/{stepper.tsx => index.tsx} (98%) rename components/stepper/{stepper.css => styles.css} (100%) diff --git a/app/account/cart/page.tsx b/app/account/cart/page.tsx index b3944b1..aaad452 100644 --- a/app/account/cart/page.tsx +++ b/app/account/cart/page.tsx @@ -2,7 +2,7 @@ /* Components */ import Breadcrumbs, {BreadcrumbItem} from "@/components/ui/breadcrumbs"; -import CartPageClient from "@/components/pages/account/cart/cartPageClient"; +import CartPageClient from "@/components/pages/account/cart"; import Nav from "@/components/layout/nav"; /* Lib */ diff --git a/app/account/wishlist/page.tsx b/app/account/wishlist/page.tsx index 30b094b..871121d 100644 --- a/app/account/wishlist/page.tsx +++ b/app/account/wishlist/page.tsx @@ -1,7 +1,7 @@ "use server"; import Nav from "@/components/layout/nav"; -import { ProductGrid } from "@/components/productGrid"; +import { ProductGrid } from "@/components/product-grid"; import Sorting from "@/components/pages/shop/sorting"; import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; import { getProducts } from "@/lib/api/products"; diff --git a/app/demo/page.tsx b/app/demo/page.tsx index 5ba35fc..1a3269d 100644 --- a/app/demo/page.tsx +++ b/app/demo/page.tsx @@ -3,12 +3,12 @@ import { Suspense, useState } from "react"; // Components -import CartDrawerItem from "@/components/cartDrawer/item/cartDrawerItem"; -import CartItem from "@/components/cartItem"; -import CommentCard from "@/components/commentCard/commentCard"; -import ProductCard from "@/components/productCard"; -import SearchResultItem from "@/components/searchResultItem"; -import Stepper from "@/components/stepper/stepper"; +import CartDrawerItem from "@/components/cart-drawer/item"; +import CartItem from "@/components/cart-item"; +import CommentCard from "@/components/comment-card"; +import ProductCard from "@/components/product-card"; +import SearchResultItem from "@/components/search-result-item"; +import Stepper from "@/components/stepper"; import Avatar from "@/components/ui/avatar"; import Breadcrumbs from "@/components/ui/breadcrumbs"; import Marker from "@/components/ui/marker"; @@ -20,7 +20,7 @@ import Footer from "@/components/layout/footer"; import Nav from "@/components/layout/nav"; import { SortingType } from "@/lib/types"; import Sorting from "@/components/pages/shop/sorting"; -import CartDrawer from "@/components/cartDrawer/cartDrawer"; +import CartDrawer from "@/components/cart-drawer"; // --- Helper Component for Layout --- const DemoSection = ({ diff --git a/app/page.tsx b/app/page.tsx index 1c88647..7c2d75d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -11,8 +11,8 @@ import Footer from "@/components/layout/footer"; import Header from "@/components/layout/header"; import Nav from "@/components/layout/nav"; import { Button } from "@/components/ui/button"; -import CommentCard from "@/components/commentCard/commentCard"; -import { ProductsSliderSection } from "@/components/productsSliderSection"; +import CommentCard from "@/components/comment-card"; +import { ProductsSliderSection } from "@/components/products-slider-section"; /* Images */ import Hero1 from "@/assets/images/home/hero-1.png"; import Hero2 from "@/assets/images/home/hero-2.png"; diff --git a/app/shop/[[...slug]]/page.tsx b/app/shop/[[...slug]]/page.tsx index 5e3e591..3d9a755 100644 --- a/app/shop/[[...slug]]/page.tsx +++ b/app/shop/[[...slug]]/page.tsx @@ -1,8 +1,8 @@ "use server"; -import { ActiveFilters } from "@/components/pages/shop/activeFilters"; -import { ProductGrid } from "@/components/productGrid"; -import { ShopSidebar } from "@/components/pages/shop/shopSidebar"; +import { ActiveFilters } from "@/components/pages/shop/active-filters"; +import { ProductGrid } from "@/components/product-grid"; +import { ShopSidebar } from "@/components/pages/shop/shop-sidebar"; import Sorting from "@/components/pages/shop/sorting"; import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; import { getProducts } from "@/lib/api/products"; diff --git a/app/shop/brands/page.tsx b/app/shop/brands/page.tsx index e14362d..7d86539 100644 --- a/app/shop/brands/page.tsx +++ b/app/shop/brands/page.tsx @@ -1,6 +1,6 @@ "use server"; -import BrandsClientWrapper from "@/components/pages/shop/brands/brandsClientWrapper"; +import BrandsClientWrapper from "@/components/pages/shop/brands/brands-client-wrapper"; import getBrands from "@/lib/api/brands"; import { BrandGroupType, BrandType } from "@/lib/types"; diff --git a/app/shop/product/[id]/page.tsx b/app/shop/product/[id]/page.tsx index d3d9ded..5e00f85 100644 --- a/app/shop/product/[id]/page.tsx +++ b/app/shop/product/[id]/page.tsx @@ -3,8 +3,8 @@ import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; import { ProductType } from "@/lib/types"; import { PRODUCTS } from "@/lib/data"; -import ProductInfoSection from "@/components/pages/shop/product/productInfoSection"; -import { ProductsSliderSection } from "@/components/productsSliderSection"; +import ProductInfoSection from "@/components/pages/shop/product/product-info-section"; +import { ProductsSliderSection } from "@/components/products-slider-section"; type ProductPageProps = { params: Promise<{ id: string }>; diff --git a/components/bookmarkButton.tsx b/components/bookmark-button.tsx similarity index 100% rename from components/bookmarkButton.tsx rename to components/bookmark-button.tsx diff --git a/components/cartDrawer/cartDrawer.tsx b/components/cart-drawer/index.tsx similarity index 98% rename from components/cartDrawer/cartDrawer.tsx rename to components/cart-drawer/index.tsx index b7ce566..dca1656 100644 --- a/components/cartDrawer/cartDrawer.tsx +++ b/components/cart-drawer/index.tsx @@ -5,7 +5,7 @@ import {Check, ShoppingCart, X, Lock, Search} from "lucide-react"; import {Dialog} from "radix-ui"; import "./styles.css"; import {Button} from "@/components/ui/button"; -import CartDrawerItem, {CartDrawerItemProps} from "@/components/cartDrawer/item/cartDrawerItem"; +import CartDrawerItem, {CartDrawerItemProps} from "./item"; import Link from "next/link"; export default function CartDrawer() { diff --git a/components/cartDrawer/item/cartDrawerItem.tsx b/components/cart-drawer/item/index.tsx similarity index 97% rename from components/cartDrawer/item/cartDrawerItem.tsx rename to components/cart-drawer/item/index.tsx index 4eaa78f..b088053 100644 --- a/components/cartDrawer/item/cartDrawerItem.tsx +++ b/components/cart-drawer/item/index.tsx @@ -8,8 +8,8 @@ import { import { Trash2 } from "lucide-react"; import Image from "next/image"; import { useState } from "react"; -import Stepper from "../../stepper/stepper"; -import "./cartDrawerItem.css"; +import Stepper from "../../stepper"; +import "./styles.css"; import Link from "next/link"; export interface CartDrawerItemProps { diff --git a/components/cartDrawer/item/cartDrawerItem.css b/components/cart-drawer/item/styles.css similarity index 100% rename from components/cartDrawer/item/cartDrawerItem.css rename to components/cart-drawer/item/styles.css diff --git a/components/cartDrawer/styles.css b/components/cart-drawer/styles.css similarity index 100% rename from components/cartDrawer/styles.css rename to components/cart-drawer/styles.css diff --git a/components/cartItem.tsx b/components/cart-item.tsx similarity index 99% rename from components/cartItem.tsx rename to components/cart-item.tsx index 11393bf..035506c 100644 --- a/components/cartItem.tsx +++ b/components/cart-item.tsx @@ -8,7 +8,7 @@ import { } from "@/lib/utils"; import {Trash2} from "lucide-react"; import Image from "next/image"; -import Stepper from "./stepper/stepper"; +import Stepper from "./stepper"; import Link from "next/link"; export interface CartItemProps { diff --git a/components/commentCard/commentCard.tsx b/components/comment-card/index.tsx similarity index 100% rename from components/commentCard/commentCard.tsx rename to components/comment-card/index.tsx diff --git a/components/filterDropdown.tsx b/components/filter-dropdown.tsx similarity index 100% rename from components/filterDropdown.tsx rename to components/filter-dropdown.tsx diff --git a/components/layout/header.tsx b/components/layout/header.tsx index 15a7672..58efcac 100644 --- a/components/layout/header.tsx +++ b/components/layout/header.tsx @@ -8,7 +8,7 @@ import { Bookmark, Mail, Search, ShoppingCartIcon, X } from "lucide-react"; import { Button } from "../ui/button"; import Avatar from "../ui/avatar"; import { Input } from "../ui/input"; -import SearchResultItem from "../searchResultItem"; +import SearchResultItem from "../search-result-item"; import { useRouter } from "next/navigation"; // Types diff --git a/components/pages/account/cart/cartPageClient.tsx b/components/pages/account/cart/index.tsx similarity index 98% rename from components/pages/account/cart/cartPageClient.tsx rename to components/pages/account/cart/index.tsx index 3d23eb7..85ef2eb 100644 --- a/components/pages/account/cart/cartPageClient.tsx +++ b/components/pages/account/cart/index.tsx @@ -7,7 +7,7 @@ import {useMemo, useState} from "react"; import Link from "next/link"; /* Components */ -import CartItem from "@/components/cartItem"; +import CartItem from "@/components/cart-item"; import {Button} from "@/components/ui/button"; /* Lib */ diff --git a/components/pages/shop/activeFilters.tsx b/components/pages/shop/active-filters.tsx similarity index 100% rename from components/pages/shop/activeFilters.tsx rename to components/pages/shop/active-filters.tsx diff --git a/components/pages/shop/brands/brandsAlphabet.tsx b/components/pages/shop/brands/brands-alphabet.tsx similarity index 100% rename from components/pages/shop/brands/brandsAlphabet.tsx rename to components/pages/shop/brands/brands-alphabet.tsx diff --git a/components/pages/shop/brands/brandsClientWrapper.tsx b/components/pages/shop/brands/brands-client-wrapper.tsx similarity index 93% rename from components/pages/shop/brands/brandsClientWrapper.tsx rename to components/pages/shop/brands/brands-client-wrapper.tsx index 97e0c95..b02b885 100644 --- a/components/pages/shop/brands/brandsClientWrapper.tsx +++ b/components/pages/shop/brands/brands-client-wrapper.tsx @@ -1,8 +1,8 @@ "use client"; import { BrandGroupType } from "@/lib/types"; -import BrandsAlphabet from "./brandsAlphabet"; -import BrandsContent from "./brandsContent"; +import BrandsAlphabet from "./brands-alphabet"; +import BrandsContent from "./brands-content"; import { useState } from "react"; interface BrandsClientWrapperProps { diff --git a/components/pages/shop/brands/brandsContent.tsx b/components/pages/shop/brands/brands-content.tsx similarity index 100% rename from components/pages/shop/brands/brandsContent.tsx rename to components/pages/shop/brands/brands-content.tsx diff --git a/components/pages/shop/product/prodDetailTabs.tsx b/components/pages/shop/product/product-detail-tabs.tsx similarity index 100% rename from components/pages/shop/product/prodDetailTabs.tsx rename to components/pages/shop/product/product-detail-tabs.tsx diff --git a/components/pages/shop/product/productGallery.tsx b/components/pages/shop/product/product-gallery.tsx similarity index 100% rename from components/pages/shop/product/productGallery.tsx rename to components/pages/shop/product/product-gallery.tsx diff --git a/components/pages/shop/product/productInfoSection.tsx b/components/pages/shop/product/product-info-section.tsx similarity index 97% rename from components/pages/shop/product/productInfoSection.tsx rename to components/pages/shop/product/product-info-section.tsx index 09eec74..0b04be1 100644 --- a/components/pages/shop/product/productInfoSection.tsx +++ b/components/pages/shop/product/product-info-section.tsx @@ -3,11 +3,11 @@ import { ProductType } from "@/lib/types"; import { getAvailability, getAvailabilityClass, getEuro } from "@/lib/utils"; import { useState } from "react"; -import ProductGallery from "./productGallery"; +import ProductGallery from "./product-gallery"; import Rating from "@/components/ui/rating"; -import BookmarkButton from "@/components/bookmarkButton"; +import BookmarkButton from "@/components/bookmark-button"; import { Button } from "@/components/ui/button"; -import { ProdTab, ProdTabList, ProdTabPanel, ProdTabs } from "./prodDetailTabs"; +import { ProdTab, ProdTabList, ProdTabPanel, ProdTabs } from "./product-detail-tabs"; interface ProductInfoSectionProps { product: ProductType; diff --git a/components/pages/shop/shopSidebar.tsx b/components/pages/shop/shop-sidebar.tsx similarity index 98% rename from components/pages/shop/shopSidebar.tsx rename to components/pages/shop/shop-sidebar.tsx index 261d072..3632d91 100644 --- a/components/pages/shop/shopSidebar.tsx +++ b/components/pages/shop/shop-sidebar.tsx @@ -1,7 +1,7 @@ "use client"; import { MOCK_SHOP_FILTERS } from "@/lib/data"; -import { FiltersDropdown } from "../../filterDropdown"; +import { FiltersDropdown } from "../../filter-dropdown"; import { Button } from "../../ui/button"; import { FilterState } from "@/lib/types"; import { useShopFilters } from "@/hooks/use-shop-filters"; diff --git a/components/productCard.tsx b/components/product-card.tsx similarity index 97% rename from components/productCard.tsx rename to components/product-card.tsx index 9a10b6a..5b29ba7 100644 --- a/components/productCard.tsx +++ b/components/product-card.tsx @@ -10,7 +10,7 @@ import { cn, getEuro } from "@/lib/utils"; // Components import Marker from "./ui/marker"; import Rating from "./ui/rating"; -import BookmarkButton from "./bookmarkButton"; +import BookmarkButton from "./bookmark-button"; export interface ProductCardOnSaveEvent { productId: string; diff --git a/components/productGrid.tsx b/components/product-grid.tsx similarity index 97% rename from components/productGrid.tsx rename to components/product-grid.tsx index 93026b3..7d2a4bd 100644 --- a/components/productGrid.tsx +++ b/components/product-grid.tsx @@ -1,7 +1,7 @@ "use client"; import { Frown } from "lucide-react"; -import ProductCard from "./productCard"; +import ProductCard from "./product-card"; import { ProductType } from "@/lib/types"; import { Button } from "./ui/button"; import { useShopFilters } from "@/hooks/use-shop-filters"; diff --git a/components/productsSliderSection.tsx b/components/products-slider-section.tsx similarity index 98% rename from components/productsSliderSection.tsx rename to components/products-slider-section.tsx index 0be467f..9073444 100644 --- a/components/productsSliderSection.tsx +++ b/components/products-slider-section.tsx @@ -1,6 +1,6 @@ "use client"; -import ProductCard from "@/components/productCard"; +import ProductCard from "@/components/product-card"; import { ProductType } from "@/lib/types"; import { Swiper, SwiperSlide } from "swiper/react"; import { type Swiper as SwiperType } from "swiper"; diff --git a/components/searchResultItem.tsx b/components/search-result-item.tsx similarity index 100% rename from components/searchResultItem.tsx rename to components/search-result-item.tsx diff --git a/components/stepper/stepper.tsx b/components/stepper/index.tsx similarity index 98% rename from components/stepper/stepper.tsx rename to components/stepper/index.tsx index 0a68b91..8a834c5 100644 --- a/components/stepper/stepper.tsx +++ b/components/stepper/index.tsx @@ -1,5 +1,5 @@ import { Minus, Plus } from "lucide-react"; -import "./stepper.css"; +import "./styles.css"; export interface StepperProps { value: number; diff --git a/components/stepper/stepper.css b/components/stepper/styles.css similarity index 100% rename from components/stepper/stepper.css rename to components/stepper/styles.css From 146b1e5afd00771779e6fb910579c30bb6c94646 Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 13:14:10 +0200 Subject: [PATCH 02/10] refactor(lib/api): rename cartItems.ts --- lib/api/{cartItems.ts => cart-items.ts} | 1 + 1 file changed, 1 insertion(+) rename lib/api/{cartItems.ts => cart-items.ts} (96%) diff --git a/lib/api/cartItems.ts b/lib/api/cart-items.ts similarity index 96% rename from lib/api/cartItems.ts rename to lib/api/cart-items.ts index e6a9a53..da41d4d 100644 --- a/lib/api/cartItems.ts +++ b/lib/api/cart-items.ts @@ -1,3 +1,4 @@ +/* lib */ import {CART_ITEMS} from "../data"; export default async function getCartItems(userId: string) { From 066d439208545e4e87617fec56423a003acfc1ab Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 13:15:07 +0200 Subject: [PATCH 03/10] refactor: imports Reorganize imports according to the Code Conventions defined in the ./docs/code_conventions.md file --- app/account/cart/page.tsx | 2 +- app/account/layout.tsx | 3 ++- app/account/wishlist/page.tsx | 8 ++++++-- app/demo/page.tsx | 1 + app/layout.tsx | 3 +++ app/page.tsx | 20 +++++++++---------- app/shop/[[...slug]]/page.tsx | 5 ++++- app/shop/brands/page.tsx | 2 ++ app/shop/layout.tsx | 3 ++- components/bookmark-button.tsx | 4 +++- components/cart-drawer/index.tsx | 13 ++++++++---- components/cart-drawer/item/index.tsx | 17 +++++++++++++--- components/cart-item.tsx | 10 +++++++--- components/comment-card/index.tsx | 3 ++- components/filter-dropdown.tsx | 8 ++++++-- components/layout/footer.tsx | 8 ++++++-- components/layout/header.tsx | 3 +++ components/layout/nav.tsx | 2 ++ components/pages/shop/active-filters.tsx | 5 ++++- .../pages/shop/brands/brands-alphabet.tsx | 1 + .../shop/brands/brands-client-wrapper.tsx | 7 +++++-- .../pages/shop/brands/brands-content.tsx | 4 +++- .../shop/product/product-detail-tabs.tsx | 1 + .../pages/shop/product/product-gallery.tsx | 8 +++++--- .../shop/product/product-info-section.tsx | 7 +++++-- components/pages/shop/shop-sidebar.tsx | 7 +++++-- components/pages/shop/sorting.tsx | 6 +++++- components/product-card.tsx | 11 +++++----- components/product-grid.tsx | 8 ++++++-- components/products-slider-section.tsx | 11 +++++++--- components/search-result-item.tsx | 10 +++++++--- components/stepper/index.tsx | 4 +++- components/ui/avatar.tsx | 2 ++ components/ui/badge.tsx | 4 +++- components/ui/breadcrumbs.tsx | 7 +++++-- components/ui/checkbox.tsx | 5 ++++- components/ui/input.tsx | 3 ++- components/ui/marker.tsx | 4 +++- components/ui/rating.tsx | 3 ++- components/ui/slider.tsx | 4 +++- components/ui/tag.tsx | 4 +++- hooks/use-countdown.ts | 4 +++- hooks/use-shop-filters.ts | 7 +++++-- lib/api/brands.ts | 3 ++- lib/api/products.ts | 3 ++- lib/data.ts | 4 +++- lib/utils.ts | 1 + 47 files changed, 189 insertions(+), 74 deletions(-) diff --git a/app/account/cart/page.tsx b/app/account/cart/page.tsx index aaad452..9e6403f 100644 --- a/app/account/cart/page.tsx +++ b/app/account/cart/page.tsx @@ -6,7 +6,7 @@ import CartPageClient from "@/components/pages/account/cart"; import Nav from "@/components/layout/nav"; /* Lib */ -import getCartItems from "@/lib/api/cartItems"; +import getCartItems from "@/lib/api/cart-items"; export default async function CartPage() { const cartItems = await getCartItems("12344321"); diff --git a/app/account/layout.tsx b/app/account/layout.tsx index 7c67af0..e7ec0a7 100644 --- a/app/account/layout.tsx +++ b/app/account/layout.tsx @@ -1,4 +1,5 @@ -import Footer from "@/components/layout/footer"; +/* components */ +import Footer from "@/components/layout/footer"; import Header from "@/components/layout/header"; export default function Layout({ children }: { children: React.ReactNode }) { diff --git a/app/account/wishlist/page.tsx b/app/account/wishlist/page.tsx index 871121d..421701d 100644 --- a/app/account/wishlist/page.tsx +++ b/app/account/wishlist/page.tsx @@ -1,14 +1,18 @@ "use server"; +/* next.js */ +import Link from "next/link"; +/* components */ import Nav from "@/components/layout/nav"; import { ProductGrid } from "@/components/product-grid"; import Sorting from "@/components/pages/shop/sorting"; import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; +import { Button } from "@/components/ui/button"; +/* lib*/ import { getProducts } from "@/lib/api/products"; import { parseSearchParams } from "@/lib/utils"; +/* icons */ import { Search } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import Link from "next/link"; interface WishlistPageProps { searchParams: Promise<{ [key: string]: string | string[] | undefined }>; diff --git a/app/demo/page.tsx b/app/demo/page.tsx index 1a3269d..c0f175e 100644 --- a/app/demo/page.tsx +++ b/app/demo/page.tsx @@ -1,5 +1,6 @@ "use client"; +/* react */ import { Suspense, useState } from "react"; // Components diff --git a/app/layout.tsx b/app/layout.tsx index 7d9e925..1ade7bd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,8 @@ +/* next.js */ import type { Metadata } from "next"; +/* styles*/ import "./globals.css"; +/* fonts*/ import { inter } from "@/assets/fonts"; export const metadata: Metadata = { diff --git a/app/page.tsx b/app/page.tsx index 7c2d75d..cdcfe68 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,8 @@ "use client"; -/* Next/React */ +/* next.js */ import Link from "next/link"; import Image, { StaticImageData } from "next/image"; -/* hooks */ -import { useCountdown } from "@/hooks/use-countdown"; -import { useState } from "react"; /* Components */ import Footer from "@/components/layout/footer"; import Header from "@/components/layout/header"; @@ -13,24 +10,27 @@ import Nav from "@/components/layout/nav"; import { Button } from "@/components/ui/button"; import CommentCard from "@/components/comment-card"; import { ProductsSliderSection } from "@/components/products-slider-section"; +/* hooks */ +import { useCountdown } from "@/hooks/use-countdown"; +import { useState } from "react"; /* Images */ import Hero1 from "@/assets/images/home/hero-1.png"; import Hero2 from "@/assets/images/home/hero-2.png"; import Hero3 from "@/assets/images/home/hero-3.png"; import Banner1 from "@/assets/images/home/banner-1.png"; import Banner2 from "@/assets/images/home/banner-2.png"; +/* Icons */ +import { ArrowLeft, ArrowRight } from "lucide-react"; +/* data */ +import { HOME_COMMENTS, PRODUCTS } from "@/lib/data"; +/* lib */ +import { formatTime } from "@/lib/utils"; /* Swiper */ import { Swiper, SwiperSlide } from "swiper/react"; import { Autoplay, Navigation, Pagination } from "swiper/modules"; import "swiper/css"; import "swiper/css/navigation"; import "swiper/css/pagination"; -/* Icons */ -import { ArrowLeft, ArrowRight } from "lucide-react"; -/* data */ -import { HOME_COMMENTS, PRODUCTS } from "@/lib/data"; -/* utils */ -import { formatTime } from "@/lib/utils"; export default function Home() { const [prevEl, setPrevEl] = useState(null); diff --git a/app/shop/[[...slug]]/page.tsx b/app/shop/[[...slug]]/page.tsx index 3d9a755..574659d 100644 --- a/app/shop/[[...slug]]/page.tsx +++ b/app/shop/[[...slug]]/page.tsx @@ -1,13 +1,16 @@ "use server"; +/* next.js */ +import { notFound } from "next/navigation"; +/* components */ import { ActiveFilters } from "@/components/pages/shop/active-filters"; import { ProductGrid } from "@/components/product-grid"; import { ShopSidebar } from "@/components/pages/shop/shop-sidebar"; import Sorting from "@/components/pages/shop/sorting"; import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; +/* lib */ import { getProducts } from "@/lib/api/products"; import { parseSearchParams } from "@/lib/utils"; -import { notFound } from "next/navigation"; interface ShopPageProps { params: Promise<{ slug?: string[]}>; diff --git a/app/shop/brands/page.tsx b/app/shop/brands/page.tsx index 7d86539..20aac85 100644 --- a/app/shop/brands/page.tsx +++ b/app/shop/brands/page.tsx @@ -1,6 +1,8 @@ "use server"; +/* components */ import BrandsClientWrapper from "@/components/pages/shop/brands/brands-client-wrapper"; +/* lib */ import getBrands from "@/lib/api/brands"; import { BrandGroupType, BrandType } from "@/lib/types"; diff --git a/app/shop/layout.tsx b/app/shop/layout.tsx index f5a99d7..39dfa43 100644 --- a/app/shop/layout.tsx +++ b/app/shop/layout.tsx @@ -1,4 +1,5 @@ -import Footer from "@/components/layout/footer"; +/* components */ +import Footer from "@/components/layout/footer"; import Header from "@/components/layout/header"; import Nav from "@/components/layout/nav"; diff --git a/components/bookmark-button.tsx b/components/bookmark-button.tsx index 4395597..0ffb2d5 100644 --- a/components/bookmark-button.tsx +++ b/components/bookmark-button.tsx @@ -1,7 +1,9 @@ "use client"; -import { Bookmark } from "lucide-react"; +/* react */ import { useState } from "react"; +/* icons */ +import { Bookmark } from "lucide-react"; interface BookmarkButtonProps { productId: string; diff --git a/components/cart-drawer/index.tsx b/components/cart-drawer/index.tsx index dca1656..4de427e 100644 --- a/components/cart-drawer/index.tsx +++ b/components/cart-drawer/index.tsx @@ -1,12 +1,17 @@ "use client"; -// import {useRef, useState} from "react"; -import {Check, ShoppingCart, X, Lock, Search} from "lucide-react"; +/* next.js*/ +import Link from "next/link"; + +/* components*/ import {Dialog} from "radix-ui"; -import "./styles.css"; import {Button} from "@/components/ui/button"; import CartDrawerItem, {CartDrawerItemProps} from "./item"; -import Link from "next/link"; + +/* icons */ +import {Check, ShoppingCart, X, Lock, Search} from "lucide-react"; +/* styles */ +import "./styles.css"; export default function CartDrawer() { // const [isOpen, setIsOpen] = useState(false); diff --git a/components/cart-drawer/item/index.tsx b/components/cart-drawer/item/index.tsx index b088053..82a85f9 100644 --- a/components/cart-drawer/item/index.tsx +++ b/components/cart-drawer/item/index.tsx @@ -1,16 +1,27 @@ "use client"; +/* react */ +import { useState } from "react"; + +/* next.js */ +import Link from "next/link"; +/* components */ +import Stepper from "../../stepper"; + +/* lib */ import { AvailabilityType } from "@/lib/types"; import { getAvailability, getEuro, } from "@/lib/utils"; + +/* icons */ import { Trash2 } from "lucide-react"; import Image from "next/image"; -import { useState } from "react"; -import Stepper from "../../stepper"; + +/* styles */ import "./styles.css"; -import Link from "next/link"; + export interface CartDrawerItemProps { imageUrl: string; diff --git a/components/cart-item.tsx b/components/cart-item.tsx index 035506c..d19e50f 100644 --- a/components/cart-item.tsx +++ b/components/cart-item.tsx @@ -1,15 +1,19 @@ "use client"; +/* next.js */ +import Image from "next/image"; +import Link from "next/link"; +/* components */ +import Stepper from "./stepper"; +/* lib */ import {AvailabilityType} from "@/lib/types"; import { getAvailability, getAvailabilityClass, getEuro, } from "@/lib/utils"; +/* icons */ import {Trash2} from "lucide-react"; -import Image from "next/image"; -import Stepper from "./stepper"; -import Link from "next/link"; export interface CartItemProps { imageUrl: string; diff --git a/components/comment-card/index.tsx b/components/comment-card/index.tsx index 54fdd25..4ea807c 100644 --- a/components/comment-card/index.tsx +++ b/components/comment-card/index.tsx @@ -1,4 +1,5 @@ -import Rating from "../ui/rating"; +/* icons */ +import Rating from "../ui/rating"; import Avatar from "../ui/avatar"; export interface CommentCardProps { diff --git a/components/filter-dropdown.tsx b/components/filter-dropdown.tsx index 0c4d329..3169619 100644 --- a/components/filter-dropdown.tsx +++ b/components/filter-dropdown.tsx @@ -1,11 +1,15 @@ "use client"; +/* react */ import { useState } from "react"; -import { Minus, Plus } from "lucide-react"; +/* components */ import { Slider } from "@/components/ui/slider"; -import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; +import { Checkbox } from "@/components/ui/checkbox"; +/* lib */ import { cn } from "@/lib/utils"; +/* icons */ +import { Minus, Plus } from "lucide-react"; interface BaseFilterProps { id: string; diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index 1635baf..7932bed 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -1,13 +1,17 @@ "use client"; +/* react*/ +import { FormEvent } from "react"; +/* next.js */ import Link from "next/link"; -import { Send } from "lucide-react"; +/* components*/ import { Input } from "../ui/input"; import { Button } from "../ui/button"; +/* icons */ import { TelegramIcon } from "../icons/telegram"; import { InstagramIcon } from "../icons/instagram"; import { TiktokIcon } from "../icons/tiktok"; -import { FormEvent } from "react"; +import { Send } from "lucide-react"; export default function Footer() { const currentYear = new Date().getFullYear(); diff --git a/components/layout/header.tsx b/components/layout/header.tsx index 58efcac..7ea09ab 100644 --- a/components/layout/header.tsx +++ b/components/layout/header.tsx @@ -1,7 +1,10 @@ "use client"; +/* react */ import React, { useEffect, useRef, useState, useCallback } from "react"; +/* next.js */ import Link from "next/link"; +/* icons */ import { Bookmark, Mail, Search, ShoppingCartIcon, X } from "lucide-react"; // UI Components diff --git a/components/layout/nav.tsx b/components/layout/nav.tsx index 8695d71..3210a53 100644 --- a/components/layout/nav.tsx +++ b/components/layout/nav.tsx @@ -1,7 +1,9 @@ "use client"; +/* next.js */ import Link from "next/link"; import { usePathname } from "next/navigation"; +/* lib */ import { cn } from "@/lib/utils"; const NAV_ITEMS = [ diff --git a/components/pages/shop/active-filters.tsx b/components/pages/shop/active-filters.tsx index 0e50c92..8e424a9 100644 --- a/components/pages/shop/active-filters.tsx +++ b/components/pages/shop/active-filters.tsx @@ -1,9 +1,12 @@ "use client"; -import { FilterState } from "@/lib/types"; +/* components*/ import { Button } from "../../ui/button"; import Tag from "../../ui/tag"; +/* hooks */ import { useShopFilters } from "@/hooks/use-shop-filters"; +/* lib */ +import { FilterState } from "@/lib/types"; import { convertFilterToTags } from "@/lib/utils"; interface ActiveFiltersProps { diff --git a/components/pages/shop/brands/brands-alphabet.tsx b/components/pages/shop/brands/brands-alphabet.tsx index 8f12104..7a905d2 100644 --- a/components/pages/shop/brands/brands-alphabet.tsx +++ b/components/pages/shop/brands/brands-alphabet.tsx @@ -1,5 +1,6 @@ "use client"; +/* lib */ import { cn } from "@/lib/utils"; interface BrandsAlphabetProps { diff --git a/components/pages/shop/brands/brands-client-wrapper.tsx b/components/pages/shop/brands/brands-client-wrapper.tsx index b02b885..b39fc3b 100644 --- a/components/pages/shop/brands/brands-client-wrapper.tsx +++ b/components/pages/shop/brands/brands-client-wrapper.tsx @@ -1,9 +1,12 @@ "use client"; -import { BrandGroupType } from "@/lib/types"; +/* react */ +import { useState } from "react"; +/* components */ import BrandsAlphabet from "./brands-alphabet"; import BrandsContent from "./brands-content"; -import { useState } from "react"; +/* lib */ +import { BrandGroupType } from "@/lib/types"; interface BrandsClientWrapperProps { brandGroups: BrandGroupType[]; diff --git a/components/pages/shop/brands/brands-content.tsx b/components/pages/shop/brands/brands-content.tsx index 7eef451..5414207 100644 --- a/components/pages/shop/brands/brands-content.tsx +++ b/components/pages/shop/brands/brands-content.tsx @@ -1,5 +1,7 @@ -import { BrandGroupType } from "@/lib/types"; +/* next.js */ import Link from "next/link"; +/* lib */ +import { BrandGroupType } from "@/lib/types"; // ===== MAIN COMPONENT ===== diff --git a/components/pages/shop/product/product-detail-tabs.tsx b/components/pages/shop/product/product-detail-tabs.tsx index e4ed56e..083a33f 100644 --- a/components/pages/shop/product/product-detail-tabs.tsx +++ b/components/pages/shop/product/product-detail-tabs.tsx @@ -1,5 +1,6 @@ "use client"; +/* react */ import { ReactNode, useState, createContext, useContext } from "react"; interface TabsContextType { diff --git a/components/pages/shop/product/product-gallery.tsx b/components/pages/shop/product/product-gallery.tsx index 31e1c02..5c783e6 100644 --- a/components/pages/shop/product/product-gallery.tsx +++ b/components/pages/shop/product/product-gallery.tsx @@ -1,13 +1,15 @@ "use client"; -import Image from "next/image"; +/* react */ import { ReactNode, useState } from "react"; +/* next.js*/ +import Image from "next/image"; +/* icons */ import { ChevronDown, ChevronUp } from "lucide-react"; - +/* swiper */ import { Swiper, SwiperSlide } from "swiper/react"; import { type Swiper as SwiperType } from "swiper"; import { Keyboard, Mousewheel } from "swiper/modules"; - import "swiper/css"; interface ProductGalleryProps { diff --git a/components/pages/shop/product/product-info-section.tsx b/components/pages/shop/product/product-info-section.tsx index 0b04be1..9b10801 100644 --- a/components/pages/shop/product/product-info-section.tsx +++ b/components/pages/shop/product/product-info-section.tsx @@ -1,13 +1,16 @@ "use client"; -import { ProductType } from "@/lib/types"; -import { getAvailability, getAvailabilityClass, getEuro } from "@/lib/utils"; +/* react*/ import { useState } from "react"; +/* components*/ import ProductGallery from "./product-gallery"; import Rating from "@/components/ui/rating"; import BookmarkButton from "@/components/bookmark-button"; import { Button } from "@/components/ui/button"; import { ProdTab, ProdTabList, ProdTabPanel, ProdTabs } from "./product-detail-tabs"; +/* lib */ +import { ProductType } from "@/lib/types"; +import { getAvailability, getAvailabilityClass, getEuro } from "@/lib/utils"; interface ProductInfoSectionProps { product: ProductType; diff --git a/components/pages/shop/shop-sidebar.tsx b/components/pages/shop/shop-sidebar.tsx index 3632d91..c7a8732 100644 --- a/components/pages/shop/shop-sidebar.tsx +++ b/components/pages/shop/shop-sidebar.tsx @@ -1,10 +1,13 @@ "use client"; -import { MOCK_SHOP_FILTERS } from "@/lib/data"; +/* components */ import { FiltersDropdown } from "../../filter-dropdown"; import { Button } from "../../ui/button"; -import { FilterState } from "@/lib/types"; +/* hooks */ import { useShopFilters } from "@/hooks/use-shop-filters"; +/* lib */ +import { MOCK_SHOP_FILTERS } from "@/lib/data"; +import { FilterState } from "@/lib/types"; import { convertFilterToTags } from "@/lib/utils"; interface ShopSidebarProps { diff --git a/components/pages/shop/sorting.tsx b/components/pages/shop/sorting.tsx index bc21804..ec9b482 100644 --- a/components/pages/shop/sorting.tsx +++ b/components/pages/shop/sorting.tsx @@ -1,10 +1,14 @@ "use client"; +/* react */ +import { useEffect, useRef, useState } from "react"; +/* hooks */ import { useShopFilters } from "@/hooks/use-shop-filters"; +/* lib */ import { SortingCriteriaType, SortingOrderType } from "@/lib/types"; import { cn } from "@/lib/utils"; +/* icons */ import { ChevronDown, SortAsc, SortDesc } from "lucide-react"; -import { useEffect, useRef, useState } from "react"; interface SortingDropdownProps { criteria: SortingCriteriaType; diff --git a/components/product-card.tsx b/components/product-card.tsx index 5b29ba7..5e164d4 100644 --- a/components/product-card.tsx +++ b/components/product-card.tsx @@ -1,16 +1,15 @@ "use client"; +/* next.js */ import Image from "next/image"; import Link from "next/link"; - -// Utils & Types -import { MarkerType } from "@/lib/types"; -import { cn, getEuro } from "@/lib/utils"; - -// Components +/* components */ import Marker from "./ui/marker"; import Rating from "./ui/rating"; import BookmarkButton from "./bookmark-button"; +/* lib */ +import { MarkerType } from "@/lib/types"; +import { cn, getEuro } from "@/lib/utils"; export interface ProductCardOnSaveEvent { productId: string; diff --git a/components/product-grid.tsx b/components/product-grid.tsx index 7d2a4bd..72dc230 100644 --- a/components/product-grid.tsx +++ b/components/product-grid.tsx @@ -1,10 +1,14 @@ "use client"; -import { Frown } from "lucide-react"; +/* components */ import ProductCard from "./product-card"; -import { ProductType } from "@/lib/types"; import { Button } from "./ui/button"; +/* hooks */ import { useShopFilters } from "@/hooks/use-shop-filters"; +/* lib */ +import { ProductType } from "@/lib/types"; +/* icons */ +import { Frown } from "lucide-react"; interface ProductGridProps { products: ProductType[]; diff --git a/components/products-slider-section.tsx b/components/products-slider-section.tsx index 9073444..82ca47e 100644 --- a/components/products-slider-section.tsx +++ b/components/products-slider-section.tsx @@ -1,12 +1,17 @@ "use client"; +/* react */ +import { useState } from "react"; +/* components */ import ProductCard from "@/components/product-card"; +/* lib */ +import { cn } from "@/lib/utils"; import { ProductType } from "@/lib/types"; +/* icons */ +import { ArrowLeft, ArrowRight } from "lucide-react"; +/* swiper */ import { Swiper, SwiperSlide } from "swiper/react"; import { type Swiper as SwiperType } from "swiper"; -import { useState } from "react"; -import { ArrowLeft, ArrowRight } from "lucide-react"; -import { cn } from "@/lib/utils"; interface ProductsSliderSectionProps { title: string; diff --git a/components/search-result-item.tsx b/components/search-result-item.tsx index c9b9844..49c7142 100644 --- a/components/search-result-item.tsx +++ b/components/search-result-item.tsx @@ -1,11 +1,15 @@ "use client"; -import { AvailabilityType } from "@/lib/types"; -import { getAvailability, getAvailabilityClass, getEuro } from "@/lib/utils"; +/* react */ +import { useState } from "react"; +/* next.js */ import Image from "next/image"; import Link from "next/link"; +/* components */ import Rating from "./ui/rating"; -import { useState } from "react"; +/* lib */ +import { AvailabilityType } from "@/lib/types"; +import { getAvailability, getAvailabilityClass, getEuro } from "@/lib/utils"; export interface SearchResultItemProps { title: string; diff --git a/components/stepper/index.tsx b/components/stepper/index.tsx index 8a834c5..60b1082 100644 --- a/components/stepper/index.tsx +++ b/components/stepper/index.tsx @@ -1,4 +1,6 @@ -import { Minus, Plus } from "lucide-react"; +/* icons */ +import { Minus, Plus } from "lucide-react"; +/* styles */ import "./styles.css"; export interface StepperProps { diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx index a47c04e..70df1ac 100644 --- a/components/ui/avatar.tsx +++ b/components/ui/avatar.tsx @@ -1,6 +1,8 @@ "use client"; +/* react */ import { useState } from "react"; +/* next.js */ import Image from "next/image"; type AvatarSize = "sm" | "md" | "lg" | "xl"; diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index 6c62a4a..9921b01 100644 --- a/components/ui/badge.tsx +++ b/components/ui/badge.tsx @@ -1,4 +1,6 @@ -import React from "react"; +/* react */ +import React from "react"; +/* icons */ import { LucideIcon } from "lucide-react"; export interface BadgeProps extends React.HTMLAttributes { diff --git a/components/ui/breadcrumbs.tsx b/components/ui/breadcrumbs.tsx index 98cbb7c..643f052 100644 --- a/components/ui/breadcrumbs.tsx +++ b/components/ui/breadcrumbs.tsx @@ -1,6 +1,9 @@ -import { cn } from "@/lib/utils"; -import Link from "next/link"; +/* react*/ import { Fragment } from "react"; +/* next.js */ +import Link from "next/link"; +/* lib */ +import { cn } from "@/lib/utils"; export interface BreadcrumbItem { label: string; diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx index 466cc48..84ec935 100644 --- a/components/ui/checkbox.tsx +++ b/components/ui/checkbox.tsx @@ -1,8 +1,11 @@ "use client" +/* react */ import * as React from "react" -import { CheckIcon } from "lucide-react" +/* components */ import { Checkbox as CheckboxPrimitive } from "radix-ui" +/* icons */ +import { CheckIcon } from "lucide-react" import { cn } from "@/lib/utils" diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 8916905..ecadc55 100644 --- a/components/ui/input.tsx +++ b/components/ui/input.tsx @@ -1,5 +1,6 @@ +/* react*/ import * as React from "react" - +/* lib */ import { cn } from "@/lib/utils" function Input({ className, type, ...props }: React.ComponentProps<"input">) { diff --git a/components/ui/marker.tsx b/components/ui/marker.tsx index 6c4cb17..39f376a 100644 --- a/components/ui/marker.tsx +++ b/components/ui/marker.tsx @@ -1,4 +1,6 @@ -import { cn } from "@/lib/utils"; +/* lib */ +import { cn } from "@/lib/utils"; +/* icons */ import { FireIcon } from "../icons/fireIcon"; export interface MarkerProps { diff --git a/components/ui/rating.tsx b/components/ui/rating.tsx index cfe800b..3660792 100644 --- a/components/ui/rating.tsx +++ b/components/ui/rating.tsx @@ -1,4 +1,5 @@ -import { Star } from "lucide-react"; +/* icons */ +import { Star } from "lucide-react"; export interface RatingProps { rating: number; diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx index 4434480..d4b82f2 100644 --- a/components/ui/slider.tsx +++ b/components/ui/slider.tsx @@ -1,8 +1,10 @@ "use client" +/* react */ import * as React from "react" +/* components*/ import { Slider as SliderPrimitive } from "radix-ui" - +/* lib */ import { cn } from "@/lib/utils" function Slider({ diff --git a/components/ui/tag.tsx b/components/ui/tag.tsx index cd28261..76a2e28 100644 --- a/components/ui/tag.tsx +++ b/components/ui/tag.tsx @@ -1,4 +1,6 @@ -import React from "react"; +/* react */ +import React from "react"; +/* icons */ import { X } from "lucide-react"; export interface TagProps { diff --git a/hooks/use-countdown.ts b/hooks/use-countdown.ts index cd0a242..5a7f962 100644 --- a/hooks/use-countdown.ts +++ b/hooks/use-countdown.ts @@ -1,5 +1,7 @@ -import { getTimeRemaining } from "@/lib/utils"; +/* react */ import { useEffect, useState } from "react"; +/* lib */ +import { getTimeRemaining } from "@/lib/utils"; export function useCountdown(deadline: Date) { const [, forceUpdate] = useState(0); diff --git a/hooks/use-shop-filters.ts b/hooks/use-shop-filters.ts index cba1897..45ec768 100644 --- a/hooks/use-shop-filters.ts +++ b/hooks/use-shop-filters.ts @@ -1,9 +1,12 @@ "use client"; +/* react*/ +import { useCallback, useTransition } from "react"; +/* next.js */ +import { useRouter, useSearchParams } from "next/navigation"; +/* lib */ import { MOCK_SHOP_FILTERS } from "@/lib/data"; import { FilterState, FilterValuesType, SortingOrderType } from "@/lib/types"; -import { useRouter, useSearchParams } from "next/navigation"; -import { useCallback, useTransition } from "react"; export function useShopFilters() { const router = useRouter(); diff --git a/lib/api/brands.ts b/lib/api/brands.ts index 65c8a56..a551233 100644 --- a/lib/api/brands.ts +++ b/lib/api/brands.ts @@ -1,4 +1,5 @@ -import { BRANDS } from "../data"; +/* lib */ +import { BRANDS } from "../data"; export default async function getBrands() { // Simulatel DB network delay diff --git a/lib/api/products.ts b/lib/api/products.ts index f83bab8..a360baa 100644 --- a/lib/api/products.ts +++ b/lib/api/products.ts @@ -1,4 +1,5 @@ -import { PRODUCTS } from "@/lib/data"; +/* lib */ +import { PRODUCTS } from "@/lib/data"; import { FilterState, ProductType, SortingType } from "@/lib/types"; interface GetProductsParams { diff --git a/lib/data.ts b/lib/data.ts index 97a8d7c..81e319f 100644 --- a/lib/data.ts +++ b/lib/data.ts @@ -1,4 +1,6 @@ -import {CommentCardProps} from "@/components/commentCard/commentCard"; +/* components */ +import {CommentCardProps} from "@/components/comment-card"; // interface +/* card*/ import {BrandType, CartItemType, FilterState, ProductType} from "./types"; const PRODUCTS: ProductType[] = [ diff --git a/lib/utils.ts b/lib/utils.ts index ca6eec7..ac605cb 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,3 +1,4 @@ +/* lib */ import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import { From af0651a98c57f5faf9d61706263aa203a26c511a Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 13:22:58 +0200 Subject: [PATCH 04/10] refactor(lib, cart-drawer): AvailabilityType Refactor the type's value of "not available" to "not_available" accroding to he Code Conventions defined in the `./docs/code_conventions.md` file. --- components/cart-drawer/item/index.tsx | 2 +- lib/types.ts | 2 +- lib/utils.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/cart-drawer/item/index.tsx b/components/cart-drawer/item/index.tsx index 82a85f9..4fac35d 100644 --- a/components/cart-drawer/item/index.tsx +++ b/components/cart-drawer/item/index.tsx @@ -50,7 +50,7 @@ export default function CartDrawerItem({ getAvailability(quantityInStock) ); const availabilityClass: string = - availability == "not available" ? "not-available" : ""; + availability == "not_available" ? "not-available" : ""; const productLink: string = `/shop/product/${productId}`; const [newQuantity, setNewQuantity] = useState(quantity); diff --git a/lib/types.ts b/lib/types.ts index bef1a88..41da84d 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -28,7 +28,7 @@ export type GenderType = "men" | "women" | "unisex"; export type MarkerType = "hit" | undefined; -export type AvailabilityType = "available" | "not available" | undefined; +export type AvailabilityType = "available" | "not_available" | undefined; export type FilterValuesType = (string | number)[] | [number, number]; export interface FilterState { diff --git a/lib/utils.ts b/lib/utils.ts index ac605cb..256ad17 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -23,14 +23,14 @@ export function getEuro(cents: number): string { export function getAvailability(items_quantity: number): AvailabilityType { if (items_quantity > 0) return "available"; - return "not available"; + return "not_available"; } export function getAvailabilityClass(availability: AvailabilityType): string { switch (availability) { case "available": return "text-accent"; - case "not available": + case "not_available": return "text-gray-500"; default: return ""; From e0ff848ec12284cf1a114de9b410a0e872f49023 Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 13:43:11 +0200 Subject: [PATCH 05/10] refactor: add JSDocs for all exported utilities and hooks --- hooks/use-countdown.ts | 6 +++++ hooks/use-shop-filters.ts | 6 +++++ lib/utils.ts | 53 ++++++++++++++++++++++++++++++++++++--- 3 files changed, 61 insertions(+), 4 deletions(-) diff --git a/hooks/use-countdown.ts b/hooks/use-countdown.ts index 5a7f962..58bdc79 100644 --- a/hooks/use-countdown.ts +++ b/hooks/use-countdown.ts @@ -3,6 +3,12 @@ import { useEffect, useState } from "react"; /* lib */ import { getTimeRemaining } from "@/lib/utils"; +/** + * Tracks the time remaining until a given deadline, updating every second. + * @remarks Requires a Client Component — uses useState and useEffect internally. + * @param deadline - The target date to count down to + * @returns An object containing the remaining time as { d, h, m, s } + */ export function useCountdown(deadline: Date) { const [, forceUpdate] = useState(0); diff --git a/hooks/use-shop-filters.ts b/hooks/use-shop-filters.ts index 45ec768..af242fe 100644 --- a/hooks/use-shop-filters.ts +++ b/hooks/use-shop-filters.ts @@ -8,6 +8,12 @@ import { useRouter, useSearchParams } from "next/navigation"; import { MOCK_SHOP_FILTERS } from "@/lib/data"; import { FilterState, FilterValuesType, SortingOrderType } from "@/lib/types"; +/** + * Manages shop filter, sorting, and pagination state via URL search parameters. + * Each update is wrapped in a transition to avoid blocking the UI during server re-renders. + * @remarks Requires a Client Component — uses useRouter, useSearchParams, and useTransition internally. + * @returns An object containing the current filter state and handlers for updating each filter type + */ export function useShopFilters() { const router = useRouter(); const searchParams = useSearchParams(); diff --git a/lib/utils.ts b/lib/utils.ts index 256ad17..8612aa1 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -14,6 +14,11 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } +/** +* Converts a price from cents to a formatted euro string. +* @param cents - Price in cents +* @returns Formatted string, e.g. "€12.99" +* */ export function getEuro(cents: number): string { return new Intl.NumberFormat("en-IE", { style: "currency", @@ -21,11 +26,21 @@ export function getEuro(cents: number): string { }).format(cents / 100); } +/** +* Detects availability based on items quantity. +* @param items_quantity - Items quantity +* @returns Availability type value: "available" of "not_available" +* */ export function getAvailability(items_quantity: number): AvailabilityType { if (items_quantity > 0) return "available"; return "not_available"; } +/** +* Converts AvailabilityType to a Tailwind CSS class +* @params availability - Availability type +* @returns Tailwind CSS styling based on availability +* */ export function getAvailabilityClass(availability: AvailabilityType): string { switch (availability) { case "available": @@ -38,8 +53,11 @@ export function getAvailabilityClass(availability: AvailabilityType): string { } /** - * Generates a specific tag for the Price Range. - * Returns null if the price is at the default [0, max] state. + * Generates a filter tag for the selected price range. + * Returns null if the range matches the default [0, max] state, + * indicating no active price filter. + * @param priceRange - Tuple representing the selected [min, max] price range in cents + * @returns A FilterTag object if the range is non-default, otherwise null */ function getPriceTag(priceRange: [number, number]): FilterTag | null { const [min, max] = priceRange; @@ -59,8 +77,10 @@ function getPriceTag(priceRange: [number, number]): FilterTag | null { } /** - * Iterates through all array-based filters (Brands, Volumes, etc.) - * and converts selected values into Tag objects. + * Converts all array-based filter selections (e.g. brands, volumes) + * into a flat list of FilterTag objects, skipping the price range filter. + * @param filters - The current filter state containing all active filter selections + * @returns An array of FilterTag objects representing each selected filter value */ function getArrayTags(filters: FilterState): FilterTag[] { const tags: FilterTag[] = []; @@ -87,6 +107,8 @@ function getArrayTags(filters: FilterState): FilterTag[] { /** * Main orchestrator to get all active filter tags. * Combines the Price tag (if active) with array tags. + * @param filters - The current filter state containing all active filter selections + * @returns An array of FilterTag objects */ export function convertFilterToTags(filters: FilterState): FilterTag[] { const priceTag = getPriceTag(filters.priceRange); @@ -95,6 +117,13 @@ export function convertFilterToTags(filters: FilterState): FilterTag[] { return priceTag ? [priceTag, ...arrayTags] : arrayTags; } +/** + * Parses raw URL search parameters into a structured filter and sorting state. + * Handles type coercion for arrays, numbers, and strings, + * falling back to default values for missing or invalid parameters. + * @param params - Raw Next.js search params object from the page props + * @returns An object containing the parsed FilterState and SortingType + */ export function parseSearchParams(params: { [key: string]: string | string[] | undefined; }): { filters: FilterState; sorting: SortingType } { @@ -152,6 +181,11 @@ export function parseSearchParams(params: { return { filters, sorting }; } +/** + * Converts a duration in seconds into its days, hours, minutes, and seconds components. + * @param seconds - Total duration in seconds + * @returns An object containing the broken-down time components { d, h, m, s } + */ export function convertSecondsToTime(seconds: number): { d: number; h: number; @@ -165,6 +199,12 @@ export function convertSecondsToTime(seconds: number): { return { d, h, m, s }; } +/** + * Calculates the time remaining until a given deadline. + * Returns zeroed components if the deadline has already passed. + * @param deadline - The target date to count down to + * @returns An object containing the remaining time as { d, h, m, s } + */ export function getTimeRemaining(deadline: Date) { const totalMilliseconds = deadline.getTime() - Date.now(); if (totalMilliseconds <= 0) return { d: 0, h: 0, m: 0, s: 0 }; @@ -172,6 +212,11 @@ export function getTimeRemaining(deadline: Date) { return convertSecondsToTime(totalSeconds); } +/** + * Formats a time component as a zero-padded two-digit string. + * @param time - A non-negative integer representing a time unit (e.g. hours, minutes, seconds) + * @returns A string padded with a leading zero if the value is less than 10 + */ export function formatTime(time: number): string { return time / 10 < 1 ? `0${time}` : time.toString(); } From 62703f3275c9642ca09882dcd93ee507d5396280 Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 15:16:25 +0200 Subject: [PATCH 06/10] refactor(cart-drawer): JSDocs --- components/pages/shop/brands/brands-client-wrapper.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/pages/shop/brands/brands-client-wrapper.tsx b/components/pages/shop/brands/brands-client-wrapper.tsx index b39fc3b..8bfd086 100644 --- a/components/pages/shop/brands/brands-client-wrapper.tsx +++ b/components/pages/shop/brands/brands-client-wrapper.tsx @@ -13,7 +13,11 @@ interface BrandsClientWrapperProps { uniqueChars: string[]; } -// Gets data from the parent server component and manages it between Brands Alphabet and Brands Content +/** + * Client wrapper that manages the selected alphabet character state, + * coordinating between the BrandsAlphabet selector and BrandsContent display. + * @remarks Requires a Client Component — uses useState internally. + */ export default function BrandsClientWrapper(props: BrandsClientWrapperProps) { const [selectedChar, setSelectedChar] = useState("ALL"); @@ -29,7 +33,8 @@ export default function BrandsClientWrapper(props: BrandsClientWrapperProps) { ); } -// Sorts brands groups in alphabetical order +// Sorts brands groups +// in alphabetical order function sortBrandGroupsByChar( brandGroups: BrandGroupType[], ): BrandGroupType[] { From 271c660159313285d43797765606d68384c82855 Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 15:22:46 +0200 Subject: [PATCH 07/10] refactor: remove commented out code As it require the Code Conventions specified in the `./docs/code_conventions.md` file --- app/demo/page.tsx | 7 ------- components/cart-drawer/index.tsx | 4 ---- 2 files changed, 11 deletions(-) diff --git a/app/demo/page.tsx b/app/demo/page.tsx index c0f175e..00f7641 100644 --- a/app/demo/page.tsx +++ b/app/demo/page.tsx @@ -59,13 +59,6 @@ export default function Page() { // State for sorting const [sorting] = useState({ criteria: "name", order: "DESC" }); - // const handleSave = (e: ProductCardOnSaveEvent) => { - // console.log( - // `${e.wishlist ? "Added to wishlist" : "Removed from wishlist"}`, - // e.productId - // ); - // }; - return (
diff --git a/components/cart-drawer/index.tsx b/components/cart-drawer/index.tsx index 4de427e..d53c8d1 100644 --- a/components/cart-drawer/index.tsx +++ b/components/cart-drawer/index.tsx @@ -14,10 +14,6 @@ import {Check, ShoppingCart, X, Lock, Search} from "lucide-react"; import "./styles.css"; export default function CartDrawer() { - // const [isOpen, setIsOpen] = useState(false); - // const quantityRef = useRef(null); - // const openCart = () => setIsOpen(true); - // const closeCart = () => setIsOpen(false); const recentlyAddedItem: CartDrawerItemProps = { title: "Versace Eros Flame", From c43ca842318adbe28428d91d67bf4a5c8607833d Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 15:27:23 +0200 Subject: [PATCH 08/10] refactor: remove logs Remove all `console.log` as it require the Code Conventions specified in the `./docs/code_conventions.md` file. --- app/demo/page.tsx | 12 ++++++------ app/shop/product/[id]/page.tsx | 1 - components/bookmark-button.tsx | 4 ---- components/cart-drawer/index.tsx | 4 ++-- components/cart-item.tsx | 1 - components/layout/footer.tsx | 1 - lib/api/brands.ts | 1 - lib/api/cart-items.ts | 1 - 8 files changed, 8 insertions(+), 17 deletions(-) diff --git a/app/demo/page.tsx b/app/demo/page.tsx index 00f7641..23a4c58 100644 --- a/app/demo/page.tsx +++ b/app/demo/page.tsx @@ -183,8 +183,8 @@ export default function Page() { volume={2} pricePerItem={4999} quantity={1} - onDelete={() => console.log("Deleted")} - onQuantityChange={() => console.log("QuantityChange")} + onDelete={() => {}} + onQuantityChange={() => {}} /> console.log("Deleted")} - onQuantityChange={() => console.log("QuantityChange")} + onDelete={() => {}} + onQuantityChange={() => {}} />
@@ -214,7 +214,7 @@ export default function Page() { volume={2} pricePerItem={4999} quantity={1} - onDelete={() => console.log("Deleted")} + onDelete={() => {}} /> console.log("Deleted")} + onDelete={() => {}} /> diff --git a/app/shop/product/[id]/page.tsx b/app/shop/product/[id]/page.tsx index 5e00f85..091ee99 100644 --- a/app/shop/product/[id]/page.tsx +++ b/app/shop/product/[id]/page.tsx @@ -13,7 +13,6 @@ type ProductPageProps = { // Mimic a DB-request async function getProduct(id: string): Promise { await new Promise((resolve) => setTimeout(resolve, 0)); - console.log("Got product with id ", id); return PRODUCTS[0]; } diff --git a/components/bookmark-button.tsx b/components/bookmark-button.tsx index 0ffb2d5..0bdf96f 100644 --- a/components/bookmark-button.tsx +++ b/components/bookmark-button.tsx @@ -15,10 +15,6 @@ export default function BookmarkButton({ productId, wishlist }: BookmarkButtonPr const handleSave = () => { const newSavedStatus = !isSaved; setIsSaved(newSavedStatus); - console.log( - `${isSaved ? "Added to wishlist" : "Removed from wishlist"}`, - productId, - ); }; diff --git a/components/cart-drawer/index.tsx b/components/cart-drawer/index.tsx index d53c8d1..38b1f21 100644 --- a/components/cart-drawer/index.tsx +++ b/components/cart-drawer/index.tsx @@ -24,7 +24,7 @@ export default function CartDrawer() { volume: 30, pricePerItem: 4999, quantity: 1, - onDelete: () => console.log("Deleted"), + onDelete: () => {}, }; const items: CartDrawerItemProps[] = [ recentlyAddedItem, @@ -37,7 +37,7 @@ export default function CartDrawer() { volume: 30, pricePerItem: 4999, quantity: 1, - onDelete: () => console.log("Deleted"), + onDelete: () => {}, })) ]; diff --git a/components/cart-item.tsx b/components/cart-item.tsx index d19e50f..f067310 100644 --- a/components/cart-item.tsx +++ b/components/cart-item.tsx @@ -47,7 +47,6 @@ export default function CartItem({ const totalPrice = pricePerItem * quantity; const handleQuantityChange = (delta: number) => { - console.log("Changed value by:", delta); onQuantityChange(productId, delta); }; diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx index 7932bed..e9db13c 100644 --- a/components/layout/footer.tsx +++ b/components/layout/footer.tsx @@ -17,7 +17,6 @@ export default function Footer() { const currentYear = new Date().getFullYear(); const handleSubscribe = (e: FormEvent) => { e.preventDefault(); - console.log("Subscribed"); }; return ( diff --git a/lib/api/brands.ts b/lib/api/brands.ts index a551233..6e49dd0 100644 --- a/lib/api/brands.ts +++ b/lib/api/brands.ts @@ -4,7 +4,6 @@ import { BRANDS } from "../data"; export default async function getBrands() { // Simulatel DB network delay await new Promise((resolve) => setTimeout(resolve, 500)); - console.log("DB request made."); return BRANDS; } \ No newline at end of file diff --git a/lib/api/cart-items.ts b/lib/api/cart-items.ts index da41d4d..93f3deb 100644 --- a/lib/api/cart-items.ts +++ b/lib/api/cart-items.ts @@ -4,7 +4,6 @@ import {CART_ITEMS} from "../data"; export default async function getCartItems(userId: string) { // Simulatel DB network delay await new Promise((resolve) => setTimeout(resolve, 500)); - console.log(`Cart items of the user ${userId} fetched successfully.`); return CART_ITEMS; } \ No newline at end of file From 4d7e14c9f64aac514fe85da681c77f57b203a146 Mon Sep 17 00:00:00 2001 From: Nazar Kyselov Date: Sat, 4 Jul 2026 16:10:08 +0200 Subject: [PATCH 09/10] refactor: interfaces - remove `export` keyword from each interface which is not used outside the fire it resides. - extract non-UI related interfaces and move to `lib/types.ts` like BreadcrumbsItemType and CommentCardType --- app/account/cart/page.tsx | 5 +-- app/account/wishlist/page.tsx | 5 +-- app/demo/page.tsx | 24 ++++++++----- app/shop/[[...slug]]/page.tsx | 9 ++--- app/shop/product/[id]/page.tsx | 10 +++--- components/cart-drawer/index.tsx | 51 ++++++++++++++------------- components/cart-drawer/item/index.tsx | 34 +++++++----------- components/cart-item.tsx | 2 +- components/comment-card/index.tsx | 14 +++----- components/product-card.tsx | 4 +-- components/search-result-item.tsx | 2 +- components/stepper/index.tsx | 2 +- components/ui/badge.tsx | 2 +- components/ui/breadcrumbs.tsx | 10 +++--- components/ui/marker.tsx | 2 +- components/ui/rating.tsx | 2 +- components/ui/tag.tsx | 2 +- lib/data.ts | 7 ++-- lib/types.ts | 13 +++++++ 19 files changed, 105 insertions(+), 95 deletions(-) diff --git a/app/account/cart/page.tsx b/app/account/cart/page.tsx index 9e6403f..eb77ebf 100644 --- a/app/account/cart/page.tsx +++ b/app/account/cart/page.tsx @@ -1,17 +1,18 @@ "use server"; /* Components */ -import Breadcrumbs, {BreadcrumbItem} from "@/components/ui/breadcrumbs"; +import Breadcrumbs from "@/components/ui/breadcrumbs"; import CartPageClient from "@/components/pages/account/cart"; import Nav from "@/components/layout/nav"; /* Lib */ import getCartItems from "@/lib/api/cart-items"; +import { BreadcrumbsItemType } from "@/lib/types"; export default async function CartPage() { const cartItems = await getCartItems("12344321"); - const breadcrumbsItems: BreadcrumbItem[] = [ + const breadcrumbsItems: BreadcrumbsItemType[] = [ { label: "Scent", href: "/" }, { label: "Cart", href: "/account/cart" }, ]; diff --git a/app/account/wishlist/page.tsx b/app/account/wishlist/page.tsx index 421701d..b61ed19 100644 --- a/app/account/wishlist/page.tsx +++ b/app/account/wishlist/page.tsx @@ -6,11 +6,12 @@ import Link from "next/link"; import Nav from "@/components/layout/nav"; import { ProductGrid } from "@/components/product-grid"; import Sorting from "@/components/pages/shop/sorting"; -import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; +import Breadcrumbs from "@/components/ui/breadcrumbs"; import { Button } from "@/components/ui/button"; /* lib*/ import { getProducts } from "@/lib/api/products"; import { parseSearchParams } from "@/lib/utils"; +import { BreadcrumbsItemType } from "@/lib/types"; /* icons */ import { Search } from "lucide-react"; @@ -24,7 +25,7 @@ export default async function WishlistPage(props: WishlistPageProps) { const { filters, sorting } = parseSearchParams(searchParams); const products = await getProducts({ filters, sorting }); - const breadcrumbsItems: BreadcrumbItem[] = [ + const breadcrumbsItems: BreadcrumbsItemType[] = [ { label: "Scent", href: "/" }, { label: "Wishlist", href: "/account/wishlist" }, ]; diff --git a/app/demo/page.tsx b/app/demo/page.tsx index 23a4c58..b15c526 100644 --- a/app/demo/page.tsx +++ b/app/demo/page.tsx @@ -206,24 +206,32 @@ export default function Page() { {/* Simulating a narrow drawer container */}
{}} /> {}} /> diff --git a/app/shop/[[...slug]]/page.tsx b/app/shop/[[...slug]]/page.tsx index 574659d..66facb6 100644 --- a/app/shop/[[...slug]]/page.tsx +++ b/app/shop/[[...slug]]/page.tsx @@ -7,10 +7,11 @@ import { ActiveFilters } from "@/components/pages/shop/active-filters"; import { ProductGrid } from "@/components/product-grid"; import { ShopSidebar } from "@/components/pages/shop/shop-sidebar"; import Sorting from "@/components/pages/shop/sorting"; -import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; +import Breadcrumbs from "@/components/ui/breadcrumbs"; /* lib */ import { getProducts } from "@/lib/api/products"; import { parseSearchParams } from "@/lib/utils"; +import { BreadcrumbsItemType } from "@/lib/types"; interface ShopPageProps { params: Promise<{ slug?: string[]}>; @@ -34,12 +35,12 @@ export default async function ShopPage(props: ShopPageProps) { const products = await getProducts({ filters, sorting, baseGender: pathGender }); - const defaultBreadcrumbsItems: BreadcrumbItem[] = [ + const defaultBreadcrumbsItems: BreadcrumbsItemType[] = [ { label: "Scent", href: "/" }, { label: "Shop", href: pathGender ? "/shop" : "" }, ]; - const categoryBreadcrumbsItem: BreadcrumbItem[] = pathGender ? [{ label: pathGender, href: ""}]: []; - const breadcrumbsItems: BreadcrumbItem[] = [...defaultBreadcrumbsItems, ...categoryBreadcrumbsItem] + const categoryBreadcrumbsItem: BreadcrumbsItemType[] = pathGender ? [{ label: pathGender, href: ""}]: []; + const breadcrumbsItems: BreadcrumbsItemType[] = [...defaultBreadcrumbsItems, ...categoryBreadcrumbsItem] return (
diff --git a/app/shop/product/[id]/page.tsx b/app/shop/product/[id]/page.tsx index 091ee99..943551b 100644 --- a/app/shop/product/[id]/page.tsx +++ b/app/shop/product/[id]/page.tsx @@ -1,10 +1,12 @@ "use server"; -import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs"; -import { ProductType } from "@/lib/types"; -import { PRODUCTS } from "@/lib/data"; +/* components */ +import Breadcrumbs from "@/components/ui/breadcrumbs"; import ProductInfoSection from "@/components/pages/shop/product/product-info-section"; import { ProductsSliderSection } from "@/components/products-slider-section"; +/* lib */ +import {BreadcrumbsItemType, ProductType} from "@/lib/types"; +import { PRODUCTS } from "@/lib/data"; type ProductPageProps = { params: Promise<{ id: string }>; @@ -21,7 +23,7 @@ export default async function ProductPage({ params }: ProductPageProps) { const { id } = await params; const product = await getProduct(id); - const breadcrumbsItems: BreadcrumbItem[] = [ + const breadcrumbsItems: BreadcrumbsItemType[] = [ { label: "Scent", href: "/" }, { label: "Shop", href: "/shop" }, { label: product.name, href: "" }, diff --git a/components/cart-drawer/index.tsx b/components/cart-drawer/index.tsx index 38b1f21..fe2def2 100644 --- a/components/cart-drawer/index.tsx +++ b/components/cart-drawer/index.tsx @@ -6,8 +6,9 @@ import Link from "next/link"; /* components*/ import {Dialog} from "radix-ui"; import {Button} from "@/components/ui/button"; -import CartDrawerItem, {CartDrawerItemProps} from "./item"; - +import CartDrawerItem from "./item"; +/* lib */ +import {CartItemType} from "@/lib/types"; /* icons */ import {Check, ShoppingCart, X, Lock, Search} from "lucide-react"; /* styles */ @@ -15,29 +16,35 @@ import "./styles.css"; export default function CartDrawer() { - const recentlyAddedItem: CartDrawerItemProps = { - title: "Versace Eros Flame", + const recentlyAddedItem: CartItemType = { + name: "Versace Eros Flame", productId: "drawer-001", productCode: "01203213", - quantityInStock: 11, imageUrl: "https://i.makeup.it/1/1x/1xkz6atfgthd.jpg", - volume: 30, - pricePerItem: 4999, quantity: 1, - onDelete: () => {}, + variant: { + volume: 30, + price: 4999, + discountedPrice: undefined, + wishlist: true, + quantityInStock: 1, + }, }; - const items: CartDrawerItemProps[] = [ + const items: CartItemType[] = [ recentlyAddedItem, ...Array.from({length: 4}, () => ({ - title: "Versace Eros Flame", + name: "Versace Eros Flame", productId: "drawer-001", productCode: "01203213", - quantityInStock: 11, imageUrl: "https://i.makeup.it/1/1x/1xkz6atfgthd.jpg", - volume: 30, - pricePerItem: 4999, quantity: 1, - onDelete: () => {}, + variant: { + volume: 30, + price: 4999, + discountedPrice: undefined, + wishlist: true, + quantityInStock: 1, + }, })) ]; @@ -97,15 +104,13 @@ export default function CartDrawer() {
{}} /> @@ -118,15 +123,13 @@ export default function CartDrawer() { {items.map((item, index) => ( {}} /> ))} diff --git a/components/cart-drawer/item/index.tsx b/components/cart-drawer/item/index.tsx index 4fac35d..256943f 100644 --- a/components/cart-drawer/item/index.tsx +++ b/components/cart-drawer/item/index.tsx @@ -9,7 +9,7 @@ import Link from "next/link"; import Stepper from "../../stepper"; /* lib */ -import { AvailabilityType } from "@/lib/types"; +import {AvailabilityType, CartItemType} from "@/lib/types"; import { getAvailability, getEuro, @@ -23,31 +23,21 @@ import Image from "next/image"; import "./styles.css"; -export interface CartDrawerItemProps { - imageUrl: string; - title: string; - volume: number; - productId: string; - productCode: string; - quantity: number; - quantityInStock: number; - pricePerItem: number; // cents +interface CartDrawerItemProps extends CartItemType { onDelete: () => void; } export default function CartDrawerItem({ imageUrl, - title, - volume, + name, + variant, productId, productCode, quantity, - quantityInStock, - pricePerItem, onDelete, }: CartDrawerItemProps) { const [isDeleted, setIsDeleted] = useState(false); const [availability] = useState( - getAvailability(quantityInStock) + getAvailability(variant.quantityInStock) ); const availabilityClass: string = availability == "not_available" ? "not-available" : ""; @@ -55,12 +45,12 @@ export default function CartDrawerItem({ const productLink: string = `/shop/product/${productId}`; const [newQuantity, setNewQuantity] = useState(quantity); const [totalPrice, setTotalPrice] = useState( - pricePerItem * quantity + variant.price * quantity ); const handleQuantity = (e: number) => { setNewQuantity(e); - setTotalPrice(e * pricePerItem); + setTotalPrice(e * variant.price); }; const handleDelete = () => { @@ -80,7 +70,7 @@ export default function CartDrawerItem({ > {`${title}

- {title} + {name}

@@ -105,12 +95,12 @@ export default function CartDrawerItem({ - {volume} ml + {variant.volume} ml
-