feat: Update AdjectivesOverview component with usage information and …

…examples
BenjaBobs · May 19, 2024 · 02e3f52 · 02e3f52
1 parent 96d9d8a
commit 02e3f52
Showing 1 changed file with 71 additions and 1 deletion.
diff --git a/src/japanese/systems/adjectives/AdjectivesOverview.tsx b/src/japanese/systems/adjectives/AdjectivesOverview.tsx
@@ -35,7 +35,7 @@ export function AdjectivesOverview() {
             type: "い (i) adjective",
             color: AdjectiveColors.i,
             description: "い-adjectives always end in い (i).",
-            example: "たかい (takai) - pretty",
+            example: "たかい (takai) - high, tall",
           },
           {
             type: "な (na) adjective",
@@ -46,6 +46,76 @@ export function AdjectivesOverview() {
           },
         ]}
       />
+      <h1>Usage</h1>
+      <p>Adjectives are used to describe nouns.</p>
+      <Table
+        rowKey={(row) => row.type}
+        cellStyle={(cell) => !cell.isHeader && { color: cell.row.color }}
+        columns={[
+          {
+            name: "Type",
+            render: (row) => <Md text={row.type} />,
+          },
+          {
+            name: "Example",
+            render: (row) => (
+              <Flex down>
+                <Md text={row.example.romaji} />
+              </Flex>
+            ),
+          },
+        ]}
+        data={[
+          {
+            type: "**い** (i) adjective",
+            color: AdjectiveColors.i,
+            example: {
+              hiragana: "**たかい**",
+              romaji: "**takai**",
+            },
+          },
+          {
+            type: "**い** (i) adjective + noun",
+            color: AdjectiveColors.i,
+            example: {
+              hiragana: "**たかい** やま",
+              romaji: "**takai** yama",
+            },
+          },
+          {
+            type: "Noun + **い** (i) adjective",
+            color: AdjectiveColors.i,
+            example: {
+              hiragana: "やま が **たかい**",
+              romaji: "yama ga **takai**",
+            },
+          },
+          {
+            type: "**な** (na) adjective",
+            color: AdjectiveColors.na,
+            example: {
+              hiragana: "**げんき**",
+              romaji: "**genki**",
+            },
+          },
+          {
+            type: "**な** (na) adjective + noun",
+            color: AdjectiveColors.na,
+            example: {
+              hiragana: "**げんきな** ひと",
+              romaji: "**genki na** hito",
+            },
+          },
+          {
+            type: "Noun + **な** (na) adjective",
+            color: AdjectiveColors.na,
+            example: {
+              hiragana: "ひと が **げんきな**",
+              romaji: "hito ga **genki**",
+            },
+          },
+        ]}
+      />
       <h1>Conjugations</h1>
       <Table
         rowKey={(row) => row.form}