feat : excel in website

2026-09-05 15:04:14 +07:00
parent c19cbe6537
commit e66b5a3a0d
18 changed files with 4386 additions and 83 deletions
@@ -15,11 +15,20 @@ import {
  CardTitle,
 } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { SiteFooter } from "@/components/public/site-footer";
 import { SiteHeader } from "@/components/public/site-header";
 import { ScrollableNav } from "@/components/public/scrollable-nav";
 import { TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
+import { GuideExportBranding } from "@/components/public/guide-export-branding";
 import { ConstellationImage } from "@/components/public/constellation-image";
 import { RichTextContent } from "@/components/rich-text-content";
 import { LiveRefresh } from "@/components/live-refresh";
@@ -358,25 +367,9 @@ function WeaponSectionContent({
      )}
    >
      {exporting ? (
-        <>
-          <Image
-            src={guide.character.splashImageUrl ?? guide.coverUrl}
-            alt=""
-            fill
-            loading="eager"
-            sizes="1200px"
-            className="object-cover"
-          />
-          <div className="absolute inset-0 bg-[#050817]/65" />
-          <Image
-            src="/icon/Watermark.png"
-            alt=""
-            width={180}
-            height={101}
-            loading="eager"
-            className="absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-          />
-        </>
+        <GuideExportBranding
+          backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl}
+        />
      ) : null}
      <header
        className={cn(
@@ -609,25 +602,9 @@ function ArtifactSectionContent({
      )}
    >
      {exporting ? (
-        <>
-          <Image
-            src={guide.character.splashImageUrl ?? guide.coverUrl}
-            alt=""
-            fill
-            loading="eager"
-            sizes="1200px"
-            className="object-cover"
-          />
-          <div className="absolute inset-0 bg-[#050817]/65" />
-          <Image
-            src="/icon/Watermark.png"
-            alt=""
-            width={180}
-            height={101}
-            loading="eager"
-            className="absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-          />
-        </>
+        <GuideExportBranding
+          backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl}
+        />
      ) : null}
      <header
        className={cn(
@@ -1214,25 +1191,9 @@ function ExtraSectionContent({
  return (
    <section className={cn("flex flex-col gap-6", exporting && "relative isolate overflow-hidden bg-[#070b20] p-10 text-white")}>
      {exporting ? (
-        <>
-          <Image
-            src={guide.character.splashImageUrl ?? guide.coverUrl}
-            alt=""
-            fill
-            loading="eager"
-            sizes="1200px"
-            className="object-cover"
-          />
-          <div className="absolute inset-0 bg-[#050817]/65" />
-          <Image
-            src="/icon/Watermark.png"
-            alt=""
-            width={180}
-            height={101}
-            loading="eager"
-            className="absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
-          />
-        </>
+        <GuideExportBranding
+          backgroundUrl={guide.character.splashImageUrl ?? guide.coverUrl}
+        />
      ) : null}
      <header className="relative z-10 flex flex-col items-center gap-3 text-center">
        <p className="text-sm font-medium text-primary">คู่มือเสริม</p>
@@ -1243,7 +1204,10 @@ function ExtraSectionContent({
        {extra.rows.map((row) => (
          <Card
            key={row.id}
-            className="overflow-hidden py-0"
+            className={cn(
+              "overflow-hidden py-0",
+              row.sheet && (exporting ? "col-span-2" : "md:col-span-2"),
+            )}
            style={row.backgroundColor ? { backgroundColor: row.backgroundColor } : undefined}
          >
            {row.imageUrl ? (
@@ -1297,6 +1261,40 @@ function ExtraSectionContent({
              </CardDescription>
              {row.percent ? <Badge>{metric(row.percent)}</Badge> : null}
            </CardHeader>
+            {row.sheet ? (
+              <CardContent
+                className={cn(
+                  "pb-5",
+                  exporting && "[&_[data-slot=table-container]]:overflow-visible",
+                )}
+              >
+                <Table
+                  className={cn(exporting && "table-fixed")}
+                  style={exporting ? undefined : { minWidth: `${row.sheet.columns.length * 140}px` }}
+                >
+                  <TableHeader>
+                    <TableRow>
+                      {row.sheet.columns.map((column) => (
+                        <TableHead key={column.id} className="whitespace-normal">
+                          {column.label}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {row.sheet.rows.map((sheetRow) => (
+                      <TableRow key={sheetRow.id}>
+                        {row.sheet!.columns.map((column) => (
+                          <TableCell key={column.id} className="whitespace-pre-wrap">
+                            {sheetRow.cells[column.id] ?? ""}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            ) : null}
          </Card>
        ))}
      </div>