From 02e3f52f4e9dd4ac7c0adbbc6b60fe9fc059b64e Mon Sep 17 00:00:00 2001
From: Benjamin <behub92@gmail.com>
Date: Sun, 19 May 2024 13:30:15 +0200
Subject: [PATCH] feat: Update AdjectivesOverview component with usage
 information and examples

---
 .../systems/adjectives/AdjectivesOverview.tsx | 72 ++++++++++++++++++-
 1 file changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/japanese/systems/adjectives/AdjectivesOverview.tsx b/src/japanese/systems/adjectives/AdjectivesOverview.tsx
index 257df7e..be00340 100644
--- 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}