refactor: keyword list in C++ keywords page

Author: Lancern

src/components/index.ts

@@ -15,6 +15,7 @@ import AutoCollapse from "@components/AutoCollapse.astro";
 import FlexTable from "@components/FlexTable.astro";
 import Incomplete from "@components/Incomplete.astro";
 import WG21PaperLink from "@components/WG21PaperLink.astro";
+import { KeywordColumn, KeywordGrid } from "@components/keyword-table";
 
 export {
   Behavior,
@@ -38,4 +39,6 @@ export {
   FlexTable,
   Incomplete,
   WG21PaperLink,
+  KeywordColumn,
+  KeywordGrid,
 };

src/components/keyword-table/KeywordColumn.astro

@@ -0,0 +1,42 @@
+---
+interface Props {
+  title?: string;
+}
+
+const { title } = Astro.props;
+---
+
+<section class="keyword-column">
+  {title ? <div class="keyword-column-title">{title}</div> : null}
+  <ul class="keyword-list">
+    <slot />
+  </ul>
+</section>
+
+<style>
+  .keyword-column {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+    margin-top: 0;
+  }
+
+  .keyword-column-title {
+    font-weight: 600;
+  }
+
+  .keyword-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .keyword-list :global(code) {
+    font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-size: 0.95em;
+  }
+</style>

src/components/keyword-table/KeywordGrid.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  columns?: number;
+}
+
+const { columns = 3 } = Astro.props;
+---
+
+<div class="keyword-grid" style={`--keyword-grid-columns: ${columns};`}>
+  <slot />
+</div>
+
+<style>
+  .keyword-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--keyword-grid-columns), minmax(0, 1fr));
+    gap: 1.25rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+
+  @media (max-width: 900px) {
+    .keyword-grid {
+      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    }
+  }
+</style>

src/components/keyword-table/index.ts

@@ -0,0 +1,4 @@
+import KeywordColumn from "@components/keyword-table/KeywordColumn.astro";
+import KeywordGrid from "@components/keyword-table/KeywordGrid.astro";
+
+export { KeywordColumn, KeywordGrid };