feat: add CI workflow

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: CI
+
+'on':
+  pull_request:
+    branches:
+      - dev
+      - master
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  check-dist:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
+        with:
+          run_install: true
+          version: 9
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run ESLint
+        run: pnpm lint
+
+      - name: Build app
+        run: pnpm build

.gitignore

@@ -40,4 +40,7 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# webstorm
+/.idea/
+
 /app/generated/prisma-client

app/demo/page.tsx

@@ -55,7 +55,7 @@ export default function Page() {
 	];
 
 	// State for sorting
-	const [sorting, setSorting] = useState<SortingType>({ criteria: "name", order: "DESC" });
+	const [sorting] = useState<SortingType>({ criteria: "name", order: "DESC" });
 
 	// const handleSave = (e: ProductCardOnSaveEvent) => {
 	// 	console.log(
@@ -355,7 +355,7 @@ export default function Page() {
 				<DemoSection title="Sorting Dropdown">
 					<div className="flex justify-end h-[220px]">
 						<Suspense>
-							{/* <Sorting criteria={sorting.criteria} order={sorting.order} /> */}
+							 <Sorting criteria={sorting.criteria} order={sorting.order} />
 						</Suspense>
 					</div>
 				</DemoSection>

app/page.tsx

@@ -133,7 +133,7 @@ export default function Home() {
 								productLink="/shop/product/111"
 								color="#32665A"
 								promotionDeadline={
-									new Date("2026-03-01T23:59:59Z")
+									new Date("2026-06-01T23:59:59Z")
 								}
 							/>
 							<BannerCard
@@ -143,7 +143,7 @@ export default function Home() {
 								productLink="/shop/product/222"
 								color="#86804C"
 								promotionDeadline={
-									new Date("2026-03-01T23:59:59Z")
+									new Date("2026-05-04T23:59:59Z")
 								}
 							/>
 						</div>
@@ -218,11 +218,7 @@ function BannerCard(props: BannerCardProps) {
 			</div>
 			<p className="mt-5 text-center">
 				<i>
-					&quot;Until the end of the promotion:{" "}
-					{cd.isMounted
-						? `${cd.d} days ${formatTime(cd.h)}:${formatTime(cd.m)}:${formatTime(cd.s)}`
-						: "0 days 00:00:00"}
-					&quot;
+					&quot;Until the end of the promotion: {cd.d} days {formatTime(cd.h)}:{formatTime(cd.m)}:{formatTime(cd.s)}&quot;
 				</i>
 			</p>
 		</div>

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

@@ -13,6 +13,7 @@ type ProductPageProps = {
 // Mimic a DB-request
 async function getProduct(id: string): Promise<ProductType> {
 	await new Promise((resolve) => setTimeout(resolve, 0));
+	console.log("Got product with id ", id);
 
 	return PRODUCTS[0];
 }

components/cartDrawerItem/cartDrawerItem.tsx

@@ -3,7 +3,6 @@
 import { AvailabilityType } from "@/lib/types";
 import {
 	getAvailability,
-	getAvailabilityClass,
 	getEuro,
 } from "@/lib/utils";
 import { Trash2 } from "lucide-react";
@@ -36,7 +35,7 @@ export default function CartDrawerItem({
 	onDelete,
 }: CartDrawerItemProps) {
 	const [isDeleted, setIsDeleted] = useState<boolean>(false);
-	const [availability, setAvailability] = useState<AvailabilityType>(
+	const [availability] = useState<AvailabilityType>(
 		getAvailability(quantityInStock)
 	);
 	const availabilityClass: string =

components/cartItem.tsx

@@ -36,7 +36,7 @@ export default function CartItem({
 	onDelete,
 }: CartItemProps) {
 	const [isDeleted, setIsDeleted] = useState<boolean>(false);
-	const [availability, setAvailability] = useState<AvailabilityType>(
+	const [availability] = useState<AvailabilityType>(
 		getAvailability(quantityInStock)
 	);
 	const availabilityClass: string = getAvailabilityClass(availability);

components/commentCard/commentCard.tsx

@@ -1,5 +1,4 @@
-import Image from "next/image";
-import Rating from "../ui/rating";
+import Rating from "../ui/rating";
 import Avatar from "../ui/avatar";
 
 export interface CommentCardProps {

components/layout/footer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Facebook, Instagram, Twitter, Send } from "lucide-react";
+import { Send } from "lucide-react";
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { TelegramIcon } from "../icons/telegram";

components/layout/header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import Link from "next/link";
 import { Bookmark, Mail, Search, ShoppingCartIcon, X } from "lucide-react";
 
@@ -34,12 +34,12 @@ export default function Header() {
 	const closeSearch = () => setIsSearchOpen(false);
 	const handleSearchFocus = () => setIsSearchOpen(true);
 	const clearSearch = () => setSearchQuery("");
-	const handleBlur = (e: PointerEvent) => {
+	const handleBlur = useCallback((e: PointerEvent) => {
 		const target = e.target as HTMLElement;
 		if (!target.closest(".search-bar")) {
 			closeSearch();
 		}
-	};
+	}, []);
 	const applySearchQuery = () => {
 		router.push(`/shop?q=${encodeURIComponent(searchQuery.trim())}`);
 		closeSearch();
@@ -59,7 +59,7 @@ export default function Header() {
 	useEffect(() => {
 		document.body.addEventListener("click", handleBlur);
 		return () => document.body.removeEventListener("click", handleBlur);
-	}, []);
+	}, [handleBlur]);
 
 	return (
 		<>

components/pages/shop/activeFilters.tsx

@@ -23,7 +23,7 @@ export function ActiveFilters({ filters }: ActiveFiltersProps) {
 
 	return (
 		<div className="selected-filters flex flex-row flex-wrap gap-5 mb-6">
-			{tags.map((tag, idx) => (
+			{tags.map((tag) => (
 				<Tag
 					key={`${tag.id}-${tag.value}`}
 					label={tag.label}

components/pages/shop/brands/brandsContent.tsx

@@ -13,7 +13,7 @@ export default function BrandsContent({ selectedChar = "ALL", brandGroups }: Bra
 
 	return (
 		<div className="px-40 flex flex-col gap-20">
-			{groupsToShow.map((b, i) => (
+			{groupsToShow.map((b) => (
 				<BrandsGroup key={`${b.char}-set`} {...b} />
 			))}
 		</div>
@@ -33,7 +33,7 @@ function BrandsGroup({ char, brands }: BrandGroupType) {
 				</h2>
 			</div>
 			<ul className="grid grid-cols-3 gap-x-8 gap-y-2">
-				{brands.map((b, i) => (
+				{brands.map((b) => (
 					<li key={b.id}>
 						<Link href={`/shop?brands=${b.id}`} className="text-xl hover:text-accent">{b.name}</Link>
 					</li>

components/pages/shop/product/productGallery.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { KeyboardEventHandler, ReactNode, useState } from "react";
+import { ReactNode, useState } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 
 import { Swiper, SwiperSlide } from "swiper/react";

components/searchResultItem.tsx

@@ -29,7 +29,7 @@ export default function SearchResultItem({
 	imageUrl,
 }: SearchResultItemProps) {
 	const productLink = `/shop/product/${productId}`;
-   const [availability, setAvailability] = useState<AvailabilityType>(getAvailability(quantityInStock));
+   const [availability] = useState<AvailabilityType>(getAvailability(quantityInStock));
    const availabilityClass: string = getAvailabilityClass(availability);
 
 	return (

components/ui/marker.tsx

@@ -1,4 +1,5 @@
-import { FireIcon } from "../icons/fireIcon";
+import { cn } from "@/lib/utils";
+import { FireIcon } from "../icons/fireIcon";
 
 export interface MarkerProps {
    name: 'hit' | undefined;
@@ -7,7 +8,9 @@ export interface MarkerProps {
 
 export default function Marker({name, size}: MarkerProps) {
    return (
-      <div className="size-6 flex justify-center items-center rounded-[8px] bg-red-600">
+      <div className={cn("flex justify-center items-center rounded-[8px] bg-red-600",
+            size === 'sm' ? "size-5" : size === 'md' ? "size-6" : "size-6",
+          )}>
          {name == 'hit' && (
             <FireIcon size={16} color="#ffffff"></FireIcon>
          )}

hooks/use-countdown.ts

@@ -2,23 +2,15 @@
 import { useEffect, useState } from "react";
 
 export function useCountdown(deadline: Date) {
-   const [isMounted, setIsMounted] = useState(false);
-   const [timeLeft, setTimeLeft] = useState({ d: 0, h: 0, m: 0, s: 0 });
+    const [, forceUpdate] = useState(0);
 
-   useEffect(() => {
-      setIsMounted(true);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            forceUpdate(t => t + 1);
+        }, 1000);
 
-      setTimeLeft(getTimeRemaining(deadline));
+        return () => clearInterval(interval);
+    }, []);
 
-      const interval = setInterval(() => {
-         setTimeLeft(getTimeRemaining(deadline));
-      }, 1000);
-
-      return () => clearInterval(interval);
-   }, [deadline])
-
-   return {
-      ...timeLeft,
-      isMounted,
-   };
+    return getTimeRemaining(deadline);
 }

lib/data.ts

@@ -303,6 +303,6 @@ const BRANDS: BrandType[] = [
 		"2million",
 		"3million",
 		"1hundred"
-	].map((b, i) => ({id: b, name: b}));
+	].map((b) => ({id: b, name: b}));
 
 export { PRODUCTS, MOCK_SHOP_FILTERS, HOME_COMMENTS, BRANDS };