Button component handled

app/components/Button/ColorList.ts

@@ -0,0 +1,50 @@
+interface ColorListValue {
+  className: string;
+}
+
+export const ColorList = new Map<string, ColorListValue>();
+
+ColorList.set("secondary", {
+  className: "bg-[#FFCC68] text-black hover:bg-[#FFE0A5] ",
+});
+
+ColorList.set("textp", {
+  className: "bg-whiter text-[#0B9A5C]",
+});
+
+ColorList.set("primary", {
+  className: "bg-[#0CAC67] text-white hover:bg-[#087646]",
+});
+
+ColorList.set("outlinep", {
+  className:
+    "bg-white text-[#0B9A5C] border border-[#0B9A5C] hover:text-[#087646] hover:border-[#087646]",
+});
+
+ColorList.set("default", {
+  className: "bg-[#F1F1F1] text-[#555555] hover:text-[#121212]",
+});
+
+ColorList.set("outline", {
+  className:
+    "bg-white text-[#6B6B6B] border border-[#6B6B6B] hover:text-[#121212] hover:border-[#121212]",
+});
+
+ColorList.set("text", {
+  className: "bg-white text-[#6B6B6B]  hover:text-[#121212] ",
+});
+
+ColorList.set("primary2", {
+  className:
+    "bg-[#0CAC67] bg-opacity-10 text-black  hover:bg-[#BBE8D4] hover:bg-opacity-100 ",
+});
+ColorList.set("default2", {
+  className: "bg-white text-[#818181]  hover:text-[#121212] ",
+});
+ColorList.set("error", {
+  className:
+    "bg-[#FB6060] bg-opacity-10 text-[#FB6060]  hover:text-[#C34A4A] hover:bg-opacity-100 hover:bg-[#FEE2E2] ",
+});
+ColorList.set("disabled", {
+  className: "text-[#979797] bg-[#F1F1F1]",
+});

app/components/Button/index.tsx

@@ -0,0 +1,36 @@
+"use client";
+import React from "react";
+import { ColorList } from "./ColorList";
+
+interface Props {
+  children: React.ReactNode;
+  size: "sm" | "md" | "lg";
+  color:
+    | "secondary"
+    | "textp"
+    | "primary"
+    | "outlinep"
+    | "default"
+    | "outline"
+    | "text"
+    | "primary2"
+    | "default2"
+    | "error"
+    | "disabled";
+}
+
+const Button = ({ children, size, color }: Props) => {
+  const renderedSize =
+    size == "lg" ? "h-[52px]" : size == "md" ? "h-[40px]" : "h-[32px]";
+  const renderedColor = ColorList.get(color);
+  return (
+    <button
+      disabled={color === "disabled"}
+      className={`w-full ${renderedSize} ${renderedColor?.className} rounded-[8px] gap-[8px] flex justify-center items-center`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

app/evaluation/CheckIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const CheckIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill="#0CAC67"
+      />
+    </svg>
+  );
+};
+
+export default CheckIcon;

app/evaluation/Note.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import CheckIcon from "./CheckIcon";
+
+const Note = () => {
+  return (
+    <div className="rounded-lg gap-4 max-w-[648px] flex items-center p-[24px] bg-white">
+      <div>
+        <CheckIcon />
+      </div>
+      <p className="text-wrap">
+        با توجه به اینکه تعیین سطح هوشمند است،در هر زمان از آزمون که سیستم تشخیص
+        دهد سطح شما تعیین می شود
+      </p>
+    </div>
+  );
+};
+
+export default Note;

app/evaluation/layout.tsx

@@ -11,7 +11,7 @@ const EvaluationLayout = ({ children }: { children: React.ReactNode }) => {
           </div>
           <div>آزمون تعیین سطح</div>
         </div>
-        <div className="flex flex-col justify-center items-center bg-[#F8F8FB] h-[100vh]">
+        <div className="p-4 gap-4 flex flex-col justify-center items-center bg-[#F8F8FB] h-fit">
           {children}
         </div>
       </main>

app/evaluation/page.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import Button from "../components/Button";
+import Note from "./Note";
 import PictuerMD from "./PictuerMD";
 import PictureSM from "./PictureSM";
 
@@ -7,6 +8,19 @@ const Evaluation = () => {
     <>
       <PictuerMD />
       <PictureSM />
+      <div className="flex">
+        <p className="text-green-600">سطح زبانتو </p>
+        <p>مشخص کن!</p>
+      </div>
+      <Note />
+      <Note />
+      <Note />
+      <Note />
+      <div className="w-[325px]">
+        <Button color="secondary" size="lg">
+          شروع آزمون
+        </Button>
+      </div>
     </>
   );
 };