feat(blocks): add Localized type support to full-guide blocks
Widens prose props on FleetDiagram, HandoffTable, PhasePanel, RouteTable, SkillPackage, and WorktreeMap to accept {en, pt} as well as string, and conditionally renders language spans. Non-prose props (id, code, etc) were left as strings.
This commit is contained in:
@@ -7,18 +7,20 @@
|
||||
// muted body) and lives here so the next page that needs it gets the same
|
||||
// beat for free.
|
||||
|
||||
type Localized = { en: string; pt: string };
|
||||
|
||||
interface Row {
|
||||
/** The package name, rendered as a `<th>` (column 1). */
|
||||
package: string;
|
||||
package: string | Localized;
|
||||
/** What the package contains (column 2). */
|
||||
contains: string;
|
||||
contains: string | Localized;
|
||||
/** Why this matters (column 3). */
|
||||
why: string;
|
||||
why: string | Localized;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
/** Column headers in render order. */
|
||||
columns: [string, string, string];
|
||||
columns: [string | Localized, string | Localized, string | Localized];
|
||||
rows: Row[];
|
||||
}
|
||||
|
||||
@@ -28,18 +30,96 @@ const { columns, rows } = Astro.props;
|
||||
<table class="handoff-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{columns[0]}</th>
|
||||
<th>{columns[1]}</th>
|
||||
<th>{columns[2]}</th>
|
||||
<th>
|
||||
{
|
||||
typeof columns[0] === 'string' ? (
|
||||
columns[0]
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{columns[0].en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{columns[0].pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</th>
|
||||
<th>
|
||||
{
|
||||
typeof columns[1] === 'string' ? (
|
||||
columns[1]
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{columns[1].en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{columns[1].pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</th>
|
||||
<th>
|
||||
{
|
||||
typeof columns[2] === 'string' ? (
|
||||
columns[2]
|
||||
) : (
|
||||
<>
|
||||
<>
|
||||
<span data-language-content="en">{columns[2].en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{columns[2].pt}
|
||||
</span>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
rows.map((row) => (
|
||||
<tr>
|
||||
<th scope="row">{row.package}</th>
|
||||
<td>{row.contains}</td>
|
||||
<td>{row.why}</td>
|
||||
<th scope="row">
|
||||
{typeof row.package === 'string' ? (
|
||||
row.package
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{row.package.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{row.package.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</th>
|
||||
<td>
|
||||
{typeof row.contains === 'string' ? (
|
||||
row.contains
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{row.contains.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{row.contains.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{typeof row.why === 'string' ? (
|
||||
row.why
|
||||
) : (
|
||||
<>
|
||||
<span data-language-content="en">{row.why.en}</span>
|
||||
<span data-language-content="pt" hidden>
|
||||
{row.why.pt}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user