added nextjs

2024-05-16 10:40:04 +07:00
parent 6129f489dd
commit 6d6bef8f50
13 changed files with 943 additions and 32 deletions
--- a/app/global.css
+++ b/app/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/app/grouping/page.tsx
+++ b/app/grouping/page.tsx
--- a/app/inside/IdComponent.tsx
+++ b/app/inside/IdComponent.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+
+type Props = {
+  updateIdList: (cids: string[]) => void;
+};
+
+export default function IdComponent({ updateIdList }: Props) {
+  let [idSet, setIdSet] = useState<Set<string>>(new Set());
+  let onValidId = (id: string) => {
+    setIdSet((prev) => new Set(prev.add(id)));
+  };
+  let removeCid = (id: string) => {
+    setIdSet((prev) => new Set([...prev].filter((x) => x !== id)));
+  };
+  useEffect(() => {
+    updateIdList([...idSet]);
+  }, [idSet]);
+  return (
+    <div className="flex justify-center">
+      <div className="flex flex-col gap-2">
+        {Array.from(idSet).map((v) => (
+          <FixedId cid={v} removeCid={removeCid} key={v} />
+        ))}
+        <SingleIdComponent onValidId={onValidId} />
+      </div>
+    </div>
+  );
+}
+
+type FixedIdProps = {
+  cid: string;
+  removeCid: (cid: string) => void;
+};
+
+function FixedId({ cid, removeCid }: FixedIdProps) {
+  return (
+    <div className="flex gap-2">
+      <input type="text" className="border-2" disabled value={cid} />
+      <button
+        className="bg-red-300 p-2 rounded-md"
+        onClick={() => removeCid(cid)}
+      >
+        ลบ
+      </button>
+    </div>
+  );
+}
+
+type SingleIdProps = {
+  onValidId: (cid: string) => void;
+};
+
+function SingleIdComponent({ onValidId }: SingleIdProps) {
+  let [isValid, setIsValid] = useState(false);
+  let [cid, setCid] = useState("");
+  useEffect(() => {
+    let isValidId = isValidThaiID(cid);
+    setIsValid(isValidId);
+    if (isValidId) {
+      onValidId(cid);
+
+      setCid("");
+    }
+  }, [cid]);
+  return (
+    <div className="flex gap-2">
+      <input
+        type="text"
+        className="border-2"
+        onChange={(v) => setCid(v.target.value)}
+        value={cid}
+      />
+      {isValid ? <p>OK</p> : null}
+    </div>
+  );
+}
+
+function isValidThaiID(id: string) {
+  if (!/^\d{13}$/.test(id)) {
+    return false;
+  }
+  let sum = 0;
+  for (let i = 0; i < 12; i++) {
+    sum += Number(id[i]) * (13 - i);
+  }
+  const checkSum = (11 - (sum % 11)) % 10;
+  return checkSum === Number(id[12]);
+}
--- a/app/inside/page.tsx
+++ b/app/inside/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+import { useState } from "react";
+import IdComponent from "./IdComponent";
+
+export default function Page() {
+  let [idList, setIdList] = useState<string[]>([]);
+  function submit() {
+    console.log(idList);
+  }
+  return (
+    <div>
+      <IdComponent updateIdList={(cids) => setIdList(cids)} />
+      <p className="flex justify-center gap-4 mt-2 items-center">
+        Total: {idList.length}{" "}
+        <button className="bg-green-200 p-2 rounded-md" onClick={submit}>
+          Submit
+        </button>
+      </p>
+    </div>
+  );
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -0,0 +1,14 @@
+import "./global.css";
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="container mx-auto mt-2">{children}</div>
+      </body>
+    </html>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>;
+}