From 42498645bde74d67c50c63f3f8f3c78f1c0bedbd Mon Sep 17 00:00:00 2001
From: chakkun1121 <99847806+chakkun1121@users.noreply.github.com>
Date: Thu, 1 Feb 2024 00:38:55 +0000
Subject: [PATCH] show checked ratio

---
 app/(app)/flashCard/cardResult.tsx | 51 ++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/app/(app)/flashCard/cardResult.tsx b/app/(app)/flashCard/cardResult.tsx
index 57330d0..87e58e3 100644
--- a/app/(app)/flashCard/cardResult.tsx
+++ b/app/(app)/flashCard/cardResult.tsx
@@ -12,6 +12,43 @@ export default function CardResult({
 }) {
   return (
     <div className="grid p-4 w-full max-w-7xl mx-auto gap-4">
+      <div>
+        <div>
+          <h2>チェック率</h2>
+          <p>
+            英語→日本語:
+            {Math.round(
+              ((results.check["en-ja"]?.length || 0) /
+                fileContent.content.length) *
+                100
+            )}
+            %
+          </p>
+          <p>
+            日本語→英語:
+            {Math.round(
+              ((results.check["ja-en"]?.length || 0) /
+                fileContent.content.length) *
+                100
+            )}
+            %
+          </p>
+        </div>
+      </div>
+      <nav className="flex-none flex gap-4">
+        <button
+          onClick={() => window.location.reload()}
+          className="p-2 rounded bg-gray-100 hover:bg-gray-200"
+        >
+          もう一度
+        </button>
+        <button
+          onClick={() => window.close()}
+          className="p-2 rounded bg-gray-100 hover:bg-gray-200"
+        >
+          閉じる
+        </button>
+      </nav>
       <table className="w-full rounded">
         <caption className="text-heading-S">結果</caption>
         <thead className="bg-gray-200">
@@ -65,20 +102,6 @@ export default function CardResult({
           })}
         </tbody>
       </table>
-      <nav className="flex-none flex gap-4">
-        <button
-          onClick={() => window.location.reload()}
-          className="p-2 rounded bg-gray-100 hover:bg-gray-200"
-        >
-          もう一度
-        </button>
-        <button
-          onClick={() => window.close()}
-          className="p-2 rounded bg-gray-100 hover:bg-gray-200"
-        >
-          閉じる
-        </button>
-      </nav>
     </div>
   );
 }