add list to catalog

apps/admin.saladeaula.digital/app/routes/_.$orgid.courses._index/grid.tsx

@@ -0,0 +1,149 @@
+import Fuse from 'fuse.js'
+import { AwardIcon, BanIcon, LaptopIcon } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { cn } from '@repo/ui/lib/utils'
+import { Currency } from '@repo/ui/components/currency'
+import {
+  Card,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+} from '@repo/ui/components/ui/empty'
+
+import type { Course, CustomPricing } from './data'
+import placeholder from '@/assets/placeholder.webp'
+
+export function Grid({
+  search,
+  hits = [],
+  customPricing = []
+}: {
+  search: string
+  hits: Course[]
+  customPricing: CustomPricing[]
+}) {
+  const fuse = useMemo(() => {
+    return new Fuse(hits, {
+      keys: ['name'],
+      threshold: 0.3,
+      includeMatches: true
+    })
+  }, [hits])
+
+  const hits_ = useMemo(() => {
+    if (!search) {
+      return hits
+    }
+
+    return fuse.search(search).map(({ item }) => item)
+  }, [search, fuse, hits])
+
+  const customPricingMap = new Map(
+    customPricing.map((x) => {
+      const [, courseId] = x.sk.split('#')
+      return [courseId, x.unit_price]
+    })
+  )
+
+  if (hits_.length === 0) {
+    return (
+      <Empty className="border border-dashed">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <BanIcon />
+          </EmptyMedia>
+          <EmptyTitle>Nada encontrado</EmptyTitle>
+          <EmptyDescription>
+            Nenhum resultado para <mark>{search}</mark>.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
+  }
+
+  return (
+    <div className="grid lg:grid-cols-3 xl:grid-cols-4 gap-5">
+      {hits_.map((props: Course, idx) => {
+        return (
+          <Course
+            key={idx}
+            custom_pricing={customPricingMap.get(props.id)}
+            {...props}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+function Course({
+  name,
+  access_period,
+  cert,
+  metadata__unit_price,
+  custom_pricing
+}: Course & { custom_pricing?: number }) {
+  return (
+    <Card className="overflow-hidden relative h-96">
+      <CardHeader className="z-1 relative">
+        <CardTitle className="text-xl/6">{name}</CardTitle>
+      </CardHeader>
+
+      <CardFooter className="text-gray-300 text-sm absolute z-1 bottom-6 w-full flex gap-1.5">
+        <ul className="flex gap-2.5">
+          <li className="flex gap-0.5 items-center">
+            <LaptopIcon className="size-4" />
+            <span>{access_period}d</span>
+          </li>
+
+          {cert?.exp_interval && (
+            <li className="flex gap-0.5 items-center">
+              <AwardIcon className="size-4" />
+              <span>{cert.exp_interval}d</span>
+            </li>
+          )}
+
+          {metadata__unit_price && (
+            <>
+              <li className="flex gap-1.5">
+                <span
+                  className={cn({
+                    'line-through text-muted-foreground': custom_pricing,
+                    'font-bold': !custom_pricing
+                  })}
+                >
+                  <Currency>{metadata__unit_price}</Currency>
+                </span>
+
+                {custom_pricing && (
+                  <span className="font-bold">
+                    <Currency>{custom_pricing}</Currency>
+                  </span>
+                )}
+              </li>
+            </>
+          )}
+        </ul>
+      </CardFooter>
+
+      <img
+        src={placeholder}
+        alt={name}
+        className="absolute bottom-0 dark:opacity-75"
+      />
+    </Card>
+  )
+}
+
+const currency = new Intl.NumberFormat('pt-BR', {
+  style: 'currency',
+  currency: 'BRL'
+})