refactor(codebase): code conventions alignment

app/account/cart/page.tsx

@@ -1,17 +1,18 @@
 "use server";
 
 /* Components */
-import Breadcrumbs, {BreadcrumbItem} from "@/components/ui/breadcrumbs";
-import CartPageClient from "@/components/pages/account/cart/cartPageClient";
+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/cartItems";
+import getCartItems from "@/lib/api/cart-items";
+import { BreadcrumbsItemType } from "@/lib/types";
 
 export default async function CartPage() {
-    const cartItems = await getCartItems("12344321");
+    const cartItems = await getCartItems();
 
-    const breadcrumbsItems: BreadcrumbItem[] = [
+    const breadcrumbsItems: BreadcrumbsItemType[] = [
         { label: "Scent", href: "/" },
         { label: "Cart", href: "/account/cart" },
     ];

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 }) {

app/account/wishlist/page.tsx

@@ -1,14 +1,19 @@
 "use server";
 
+/* next.js */
+import Link from "next/link";
+/* components */
 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 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";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
 
 interface WishlistPageProps {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -20,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" },
 	];

app/demo/page.tsx

@@ -1,14 +1,15 @@
 "use client";
 
+/* react */
 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 +21,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 = ({
@@ -58,13 +59,6 @@ export default function Page() {
 	// State for sorting
 	const [sorting] = useState<SortingType>({ criteria: "name", order: "DESC" });
 
-	// const handleSave = (e: ProductCardOnSaveEvent) => {
-	// 	console.log(
-	// 		`${e.wishlist ? "Added to wishlist" : "Removed from wishlist"}`,
-	// 		e.productId
-	// 	);
-	// };
-
 	return (
 		<div className="min-h-screen bg-white">
 			<Header></Header>
@@ -189,8 +183,8 @@ export default function Page() {
 							volume={2}
 							pricePerItem={4999}
 							quantity={1}
-							onDelete={() => console.log("Deleted")}
-							onQuantityChange={() => console.log("QuantityChange")}
+							onDelete={() => {}}
+							onQuantityChange={() => {}}
 						/>
 						<CartItem
 							name="Expensive Limited Edition"
@@ -201,8 +195,8 @@ export default function Page() {
 							volume={2}
 							pricePerItem={11999}
 							quantity={1}
-							onDelete={() => console.log("Deleted")}
-							onQuantityChange={() => console.log("QuantityChange")}
+							onDelete={() => {}}
+							onQuantityChange={() => {}}
 						/>
 					</div>
 				</DemoSection>
@@ -212,26 +206,34 @@ export default function Page() {
 					{/* Simulating a narrow drawer container */}
 					<div className="w-[360px] bg-white p-4 border border-gray-200 shadow-sm flex flex-col gap-6">
 						<CartDrawerItem
-							title="Versace Eros Flame"
+							name="Versace Eros Flame"
 							productId="drawer-001"
 							productCode="01203213"
-							quantityInStock={11}
+							variant={{
+								volume: 30,
+								price: 4999,
+								discountedPrice: undefined,
+								wishlist: true,
+								quantityInStock: 1,
+							}}
 							imageUrl="https://i.makeup.it/1/1x/1xkz6atfgthd.jpg"
-							volume={2}
-							pricePerItem={4999}
 							quantity={1}
-							onDelete={() => console.log("Deleted")}
+							onDelete={() => {}}
 						/>
 						<CartDrawerItem
-							title="Versace Eros Flame"
+							name="Versace Eros Flame"
 							productId="drawer-002"
 							productCode="01203213"
-							quantityInStock={0}
+							variant={{
+								volume: 30,
+								price: 4999,
+								discountedPrice: undefined,
+								wishlist: true,
+								quantityInStock: 1,
+							}}
 							imageUrl="https://i.makeup.it/1/1x/1xkz6atfgthd.jpg"
-							volume={2}
-							pricePerItem={4999}
 							quantity={1}
-							onDelete={() => console.log("Deleted")}
+							onDelete={() => {}}
 						/>
 					</div>
 				</DemoSection>

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 = {

app/page.tsx

@@ -1,36 +1,36 @@
 "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";
 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";
+/* 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<HTMLElement | null>(null);

app/shop/[[...slug]]/page.tsx

@@ -1,13 +1,17 @@
 "use server";
 
-import { ActiveFilters } from "@/components/pages/shop/activeFilters";
-import { ProductGrid } from "@/components/productGrid";
-import { ShopSidebar } from "@/components/pages/shop/shopSidebar";
+/* 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";
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+/* lib */
 import { getProducts } from "@/lib/api/products";
 import { parseSearchParams } from "@/lib/utils";
-import { notFound } from "next/navigation";
+import { BreadcrumbsItemType } from "@/lib/types";
 
 interface ShopPageProps {
 	params: Promise<{ slug?: string[]}>;
@@ -31,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 (
 		<main className="mt-14 mb-20">

app/shop/brands/page.tsx

@@ -1,6 +1,8 @@
 "use server";
 
-import BrandsClientWrapper from "@/components/pages/shop/brands/brandsClientWrapper";
+/* components */
+import BrandsClientWrapper from "@/components/pages/shop/brands/brands-client-wrapper";
+/* lib */
 import getBrands from "@/lib/api/brands";
 import { BrandGroupType, BrandType } from "@/lib/types";
 

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";
 

app/shop/product/[id]/page.tsx

@@ -1,28 +1,24 @@
 "use server";
 
-import Breadcrumbs, { BreadcrumbItem } from "@/components/ui/breadcrumbs";
-import { ProductType } from "@/lib/types";
+/* 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";
-import ProductInfoSection from "@/components/pages/shop/product/productInfoSection";
-import { ProductsSliderSection } from "@/components/productsSliderSection";
-
-type ProductPageProps = {
-	params: Promise<{ id: string }>;
-};
 
 // Mimic a DB-request
-async function getProduct(id: string): Promise<ProductType> {
+async function getProduct(): Promise<ProductType> {
 	await new Promise((resolve) => setTimeout(resolve, 0));
-	console.log("Got product with id ", id);
 
 	return PRODUCTS[0];
 }
 
-export default async function ProductPage({ params }: ProductPageProps) {
-	const { id } = await params;
-	const product = await getProduct(id);
+export default async function ProductPage() {
+	const product = await getProduct();
 
-	const breadcrumbsItems: BreadcrumbItem[] = [
+	const breadcrumbsItems: BreadcrumbsItemType[] = [
 		{ label: "Scent", href: "/" },
 		{ label: "Shop", href: "/shop" },
 		{ label: product.name, href: "" },

components/bookmarkButton.tsx → components/bookmark-button.tsx

@@ -1,22 +1,20 @@
 "use client";
 
-import { Bookmark } from "lucide-react";
+/* react */
 import { useState } from "react";
+/* icons */
+import { Bookmark } from "lucide-react";
 
 interface BookmarkButtonProps {
 	productId: string;
 	wishlist: boolean;
 }
 
-export default function BookmarkButton({ productId, wishlist }: BookmarkButtonProps) {
+export default function BookmarkButton({ wishlist }: BookmarkButtonProps) {
 	const [isSaved, setIsSaved] = useState<boolean>(wishlist);
 	const handleSave = () => {
 		const newSavedStatus = !isSaved;
 		setIsSaved(newSavedStatus);
-		console.log(
-			`${isSaved ? "Added to wishlist" : "Removed from wishlist"}`,
-			productId,
-		);
 	};