diff --git a/app/account/cart/page.tsx b/app/account/cart/page.tsx index b3944b1..961e9eb 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 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" }, ]; 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 30b094b..b61ed19 100644 --- a/app/account/wishlist/page.tsx +++ b/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" }, ]; diff --git a/app/demo/page.tsx b/app/demo/page.tsx index 5ba35fc..b15c526 100644 --- a/app/demo/page.tsx +++ b/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({ criteria: "name", order: "DESC" }); - // const handleSave = (e: ProductCardOnSaveEvent) => { - // console.log( - // `${e.wishlist ? "Added to wishlist" : "Removed from wishlist"}`, - // e.productId - // ); - // }; - return (
@@ -189,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={() => {}} />
@@ -212,26 +206,34 @@ export default function Page() { {/* Simulating a narrow drawer container */}
console.log("Deleted")} + onDelete={() => {}} /> console.log("Deleted")} + onDelete={() => {}} />
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 1c88647..cdcfe68 100644 --- a/app/page.tsx +++ b/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(null); diff --git a/app/shop/[[...slug]]/page.tsx b/app/shop/[[...slug]]/page.tsx index 5e3e591..66facb6 100644 --- a/app/shop/[[...slug]]/page.tsx +++ b/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 (
diff --git a/app/shop/brands/page.tsx b/app/shop/brands/page.tsx index e14362d..20aac85 100644 --- a/app/shop/brands/page.tsx +++ b/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"; 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/app/shop/product/[id]/page.tsx b/app/shop/product/[id]/page.tsx index d3d9ded..63e1878 100644 --- a/app/shop/product/[id]/page.tsx +++ b/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 { +async function getProduct(): Promise { 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: "" }, diff --git a/components/bookmarkButton.tsx b/components/bookmark-button.tsx similarity index 77% rename from components/bookmarkButton.tsx rename to components/bookmark-button.tsx index 4395597..1d4a6cf 100644 --- a/components/bookmarkButton.tsx +++ b/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(wishlist); const handleSave = () => { const newSavedStatus = !isSaved; setIsSaved(newSavedStatus); - console.log( - `${isSaved ? "Added to wishlist" : "Removed from wishlist"}`, - productId, - ); }; diff --git a/components/cartDrawer/cartDrawer.tsx b/components/cart-drawer/index.tsx similarity index 82% rename from components/cartDrawer/cartDrawer.tsx rename to components/cart-drawer/index.tsx index b7ce566..fe2def2 100644 --- a/components/cartDrawer/cartDrawer.tsx +++ b/components/cart-drawer/index.tsx @@ -1,42 +1,50 @@ "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 "@/components/cartDrawer/item/cartDrawerItem"; -import Link from "next/link"; +import CartDrawerItem from "./item"; +/* lib */ +import {CartItemType} from "@/lib/types"; +/* icons */ +import {Check, ShoppingCart, X, Lock, Search} from "lucide-react"; +/* styles */ +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", + 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: () => console.log("Deleted"), + 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: () => console.log("Deleted"), + variant: { + volume: 30, + price: 4999, + discountedPrice: undefined, + wishlist: true, + quantityInStock: 1, + }, })) ]; @@ -96,15 +104,13 @@ export default function CartDrawer() { {}} /> @@ -117,15 +123,13 @@ export default function CartDrawer() { {items.map((item, index) => ( {}} /> ))} diff --git a/components/cartDrawer/item/cartDrawerItem.tsx b/components/cart-drawer/item/index.tsx similarity index 79% rename from components/cartDrawer/item/cartDrawerItem.tsx rename to components/cart-drawer/item/index.tsx index 4eaa78f..256943f 100644 --- a/components/cartDrawer/item/cartDrawerItem.tsx +++ b/components/cart-drawer/item/index.tsx @@ -1,55 +1,56 @@ "use client"; +/* react */ +import { useState } from "react"; + +/* next.js */ +import Link from "next/link"; -import { AvailabilityType } from "@/lib/types"; +/* components */ +import Stepper from "../../stepper"; + +/* lib */ +import {AvailabilityType, CartItemType} 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/stepper"; -import "./cartDrawerItem.css"; -import Link from "next/link"; -export interface CartDrawerItemProps { - imageUrl: string; - title: string; - volume: number; - productId: string; - productCode: string; - quantity: number; - quantityInStock: number; - pricePerItem: number; // cents +/* styles */ +import "./styles.css"; + + +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" : ""; + availability == "not_available" ? "not-available" : ""; 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 = () => { @@ -69,7 +70,7 @@ export default function CartDrawerItem({ > {`${title}

- {title} + {name}

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