Merge branch 'main' into MED-85

app/home/(user)/_components/order-cards.tsx

@@ -1,74 +1,68 @@
-"use client";
+'use client';
 
-import { ChevronRight, HeartPulse } from 'lucide-react';
 import Link from 'next/link';
 
+import { cn } from '@/lib/utils';
+import { pathsConfig } from '@/packages/shared/src/config';
+import { ComponentInstanceIcon } from '@radix-ui/react-icons';
+import { ChevronRight, HeartPulse } from 'lucide-react';
+
 import { Button } from '@kit/ui/button';
 import {
   Card,
-  CardHeader,
   CardDescription,
-  CardProps,
   CardFooter,
+  CardHeader,
+  CardProps,
 } from '@kit/ui/card';
-import { Trans } from '@kit/ui/trans';
-import { cn } from '@/lib/utils';
 
-const dummyCards = [
-  {
-    title: 'booking:analysisPackages.title',
-    description: 'booking:analysisPackages.description',
-    descriptionColor: 'text-primary',
-    icon: (
-      <Link href={'/home/order-analysis-package'}>
-        <Button size="icon" variant="outline" className="px-2 text-black">
-          <ChevronRight className="size-4 stroke-2" />
-        </Button>
-      </Link>
-    ),
-    cardVariant: 'gradient-success' as CardProps['variant'],
-    iconBg: 'bg-warning',
-  },
-];
+import { ServiceCategory } from './service-categories';
 
-export default function OrderCards() {
+export default function OrderCards({
+  heroCategories,
+}: {
+  heroCategories: ServiceCategory[];
+}) {
   return (
-    <div className="grid grid-cols-3 gap-6 mt-4">
-      {dummyCards.map(({
-        title,
-        description,
-        icon,
-        cardVariant,
-        descriptionColor,
-        iconBg,
-      }) => (
+    <div className="xs:grid-cols-3 mt-4 grid grid-cols-1 gap-2">
+      {heroCategories.map(({ name, description, color, handle }) => (
         <Card
-          key={title}
-          variant={cardVariant}
+          key={name}
+          variant={`gradient-${color}` as CardProps['variant']}
           className="flex flex-col justify-between"
         >
-          <CardHeader className="items-end-safe">
+          <CardHeader className="relative flex flex-row justify-between">
             <div
               className={cn(
-                'flex size-8 items-center-safe justify-center-safe rounded-full text-white',
-                iconBg,
+                'flex size-8 items-center-safe justify-center-safe rounded-full',
+                `text-${color}`,
+                `bg-${color}/10`,
+                {
+                  'bg-primary/10': color === 'success',
+                },
               )}
             >
-              {icon}
+              <ComponentInstanceIcon
+                className={cn('size-4', `fill-${color}`)}
+              />
+            </div>
+            <div className="absolute top-2 right-2 flex size-8 items-center-safe justify-center-safe rounded-xl text-white">
+              <Link
+                href={pathsConfig.app.bookingHandle.replace('[handle]', handle)}
+              >
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="px-2 text-black"
+                >
+                  <ChevronRight className="size-4 stroke-2" />
+                </Button>
+              </Link>
             </div>
           </CardHeader>
-          <CardFooter className="flex flex-col items-start gap-2">
-            <div
-              className={'flex size-8 items-center-safe justify-center-safe rounded-full text-white bg-primary\/10 mb-6'}
-            >
-              <HeartPulse className="size-4 fill-green-500" />
-            </div>
-            <h5>
-              <Trans i18nKey={title} />
-            </h5>
-            <CardDescription className={descriptionColor}>
-              <Trans i18nKey={description} />
-            </CardDescription>
+          <CardFooter className="mt-5 flex flex-col items-start gap-2">
+            <h5>{name}</h5>
+            <CardDescription>{description}</CardDescription>
           </CardFooter>
         </Card>
       ))}

app/home/(user)/_components/service-categories.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { createPath, pathsConfig } from '@/packages/shared/src/config';
+import { ComponentInstanceIcon } from '@radix-ui/react-icons';
+
+import { cn } from '@kit/ui/shadcn';
+import { Card, CardDescription, CardTitle } from '@kit/ui/shadcn/card';
+
+export interface ServiceCategory {
+  name: string;
+  handle: string;
+  color: string;
+  description: string;
+}
+
+const ServiceCategories = ({
+  categories,
+}: {
+  categories: ServiceCategory[];
+}) => {
+  return (
+    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
+      {categories.map((category, index) => (
+        <Card
+          key={index}
+          className="flex cursor-pointer gap-2 p-4 shadow hover:shadow-md"
+          onClick={() => {
+            redirect(
+              pathsConfig.app.bookingHandle.replace(
+                '[handle]',
+                category.handle,
+              ),
+            );
+          }}
+        >
+          <div
+            className={cn(
+              'flex size-8 items-center-safe justify-center-safe rounded-full',
+              `bg-${category.color}/10`,
+              `text-${category.color}`,
+            )}
+          >
+            <ComponentInstanceIcon />
+          </div>
+          <div>
+            <h5 className="mb-2 text-lg font-semibold">{category.name}</h5>
+            <CardDescription className="">
+              {category.description}
+            </CardDescription>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default ServiceCategories;