j

components/public/structured-guide.tsx

@@ -56,7 +56,10 @@ import {
 } from "@/lib/guides/talents";
 import { parseYouTubeUrl } from "@/lib/guides/youtube";
 import { normalizeExtraRichText } from "@/lib/rich-text";
-import { DEFAULT_EXTRA_SHEET_COLUMN_WIDTH } from "@/lib/guides/extra-sheet";
+import {
+  DEFAULT_EXTRA_SHEET_COLUMN_WIDTH,
+  extraSheetUsedRange,
+} from "@/lib/guides/extra-sheet";
 import { publicGuideSections } from "@/lib/guides/public-sections";
 import { cn } from "@/lib/utils";
 
@@ -1295,12 +1298,14 @@ function ExtraSectionContent({
         {action}
       </header>
       <div className={cn("relative z-10 grid gap-5 md:grid-cols-2", exporting && "grid-cols-2")}>
-        {extra.rows.map((row) => (
+        {extra.rows.map((row) => {
+          const displaySheet = row.sheet ? extraSheetUsedRange(row.sheet) : null;
+          return (
           <Card
             key={row.id}
             className={cn(
               "overflow-hidden py-0",
-              row.sheet && (exporting ? "col-span-2" : "md:col-span-2"),
+              displaySheet && (exporting ? "col-span-2" : "md:col-span-2"),
             )}
             style={row.backgroundColor ? { backgroundColor: row.backgroundColor } : undefined}
           >
@@ -1355,7 +1360,7 @@ function ExtraSectionContent({
               </CardDescription>
               {row.percent ? <Badge>{metric(row.percent, exporting ? "en-US" : undefined)}</Badge> : null}
             </CardHeader>
-            {row.sheet ? (
+            {displaySheet ? (
               <CardContent
                 className={cn(
                   "pb-5",
@@ -1365,14 +1370,14 @@ function ExtraSectionContent({
                 <Table
                   className={cn(exporting && "table-fixed")}
                   style={{
-                    minWidth: `${row.sheet.columns.reduce(
+                    minWidth: `${displaySheet.columns.reduce(
                       (total, column) => total + (column.width ?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH),
                       0,
                     )}px`,
                   }}
                 >
                   <colgroup>
-                    {row.sheet.columns.map((column) => (
+                    {displaySheet.columns.map((column) => (
                       <col
                         key={column.id}
                         style={{ width: column.width ?? DEFAULT_EXTRA_SHEET_COLUMN_WIDTH }}
@@ -1381,7 +1386,7 @@ function ExtraSectionContent({
                   </colgroup>
                   <TableHeader>
                     <TableRow>
-                      {row.sheet.columns.map((column) => (
+                      {displaySheet.columns.map((column) => (
                         <TableHead key={column.id} className="border-l first:border-l-0 whitespace-normal">
                           {column.label}
                         </TableHead>
@@ -1389,9 +1394,9 @@ function ExtraSectionContent({
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {row.sheet.rows.map((sheetRow) => (
+                    {displaySheet.rows.map((sheetRow) => (
                       <TableRow key={sheetRow.id}>
-                        {row.sheet!.columns.map((column) => (
+                        {displaySheet.columns.map((column) => (
                           <TableCell
                             key={column.id}
                             className="border-l first:border-l-0 whitespace-normal"
@@ -1413,7 +1418,8 @@ function ExtraSectionContent({
               </CardContent>
             ) : null}
           </Card>
-        ))}
+          );
+        })}
       </div>
     </section>
   );