refactor: migrate project to TypeScript and translate comments to English

2026-09-14 13:27:17 +02:00
parent 1ef621f832
commit 4cd34106b0
35 changed files with 427 additions and 165 deletions
@@ -0,0 +1,108 @@
+'use client';
+
+import type {Machine} from '@/types/domain';
+import {useState} from 'react';
+import {Modal, Button, message} from 'antd';
+import {ShoppingCartOutlined, EyeOutlined} from '@ant-design/icons';
+import {useAppDispatch} from '@/store/hooks';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {addToCart} from '@/store/cartSlice';
+
+export default function MobileShowcase() {
+    const dispatch = useAppDispatch();
+    const {t, dir} = useLanguage();
+    const [quickViewMachine, setQuickViewMachine] = useState<Machine | null>(null);
+
+    const handleAddToCart = (machine: Machine) => {
+        dispatch(
+            addToCart({
+                id: machine.id,
+                name: machine.name,
+                priceNumeric: machine.priceNumeric,
+                priceLabel: machine.priceLabel,
+                image: machine.image,
+            })
+        );
+        message.success(t.cart.addToast(machine.name));
+    };
+
+    const handleModalAddToCart = () => {
+        if (!quickViewMachine) return;
+        handleAddToCart(quickViewMachine);
+        setQuickViewMachine(null);
+    };
+
+    return (
+        <section id="showcase" className="relative w-full py-8 px-4" dir={dir}>
+            <div className="flex flex-col gap-4">
+                {t.machines.map((machine) => (
+                    <div
+                        key={machine.id}
+                        className="flex gap-4 items-center bg-surface border border-subtle rounded-2xl p-4"
+                    >
+                        <img
+                            src={machine.image}
+                            alt={machine.name}
+                            className="w-24 h-24 object-contain shrink-0"
+                            onClick={() => setQuickViewMachine(machine)}
+                        />
+
+                        <div className="flex flex-col gap-1.5 min-w-0 flex-1">
+                            <span className="text-brand-400 text-xs font-semibold tracking-wide">
+                                {machine.shortLabel}
+                            </span>
+                            <h3 className="text-lg font-bold text-primary truncate">
+                                {machine.name}
+                            </h3>
+                            <p className="text-sm text-secondary line-clamp-2">
+                                {machine.description}
+                            </p>
+                            <p className="text-base font-bold text-primary mt-1">
+                                {machine.priceLabel}
+                            </p>
+
+                            <div className="flex justify-start items-center  mt-3">
+                                <Button
+                                    type="primary"
+                                    size="middle"
+                                    icon={<ShoppingCartOutlined/>}
+                                    onClick={() => handleAddToCart(machine)}
+                                >
+                                    {t.machineActions.addToCart}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            <Modal
+                open={!!quickViewMachine}
+                onCancel={() => setQuickViewMachine(null)}
+                footer={null}
+                centered
+                title={quickViewMachine?.name}
+            >
+                {quickViewMachine && (
+                    <div className="flex flex-col gap-4">
+                        <img
+                            src={quickViewMachine.image}
+                            alt={quickViewMachine.name}
+                            className="w-full h-64 object-contain"
+                        />
+                        <p className="text-secondary leading-7">{quickViewMachine.description}</p>
+                        <p className="text-xl font-bold text-primary">{quickViewMachine.priceLabel}</p>
+                        <Button
+                            type="primary"
+                            size="large"
+                            icon={<ShoppingCartOutlined/>}
+                            onClick={handleModalAddToCart}
+                        >
+                            {t.machineActions.addToCart}
+                        </Button>
+                    </div>
+                )}
+            </Modal>
+        </section>
+    );
+}