chore: tailwind theme configuration & custom components

.eslintrc.cjs

@@ -3,28 +3,29 @@ module.exports = {
   env: {
     node: true,
     browser: true,
-    es2020: true,
+    es2020: true
   },
   settings: {
     react: {
-      version: 'detect',
-    },
+      version: 'detect'
+    }
   },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:tailwindcss/recommended'
   ],
   overrides: [],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
     ecmaFeatures: {
-      jsx: true,
-    },
+      jsx: true
+    }
   },
   plugins: ['react', '@typescript-eslint', 'react-refresh'],
   rules: {
@@ -48,6 +49,6 @@ module.exports = {
     '@typescript-eslint/interface-name-prefix': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-  },
-}
+    '@typescript-eslint/no-var-requires': 'off'
+  }
+}

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.eslintcache

.prettierrc

@@ -1,10 +1,9 @@
 {
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 120,
-    "tabWidth": 2,
-    "endOfLine": "auto",
-    "trailingComma": "none",
-    "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
-  }
-
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "antd": "^5.19.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -27,6 +28,7 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.8",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-organize-imports": "^3.2.4",

postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 }

src/App.tsx

@@ -1,12 +1,44 @@
+import { Typography } from 'antd'
+import ButtonOutlined from './components/Buttons/ButtonOutlined'
+import ButtonPrimary from './components/Buttons/ButtonPrimary'
+import ButtonSecondary from './components/Buttons/ButtonSecondary'
+import Input from './components/Form/Input'
+import ModalTemplate from './components/ModalTemplate'
+import ThemeProvider from './lib/ThemeProvider'
+
 function App() {
+  const { Text } = Typography
+
   return (
-    <>
-      <div className="flex h-screen">
-        <div className="m-auto">
-          <h3 className="text-xl font-bold">HOME</h3>
+    <ThemeProvider>
+      <div className="flex h-screen bg-[#0E2A3F]">
+        <div className="m-auto px-3">
+          <p className="font-heading text-3xl font-bold text-text_color-100">HOME</p>
+          <Text className="text-lg font-normal text-text_color-100">
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos dolores, veritatis qui error perspiciatis
+            neque ratione vitae architecto nam, dolore eum repellendus laudantium, commodi fugiat. Doloribus voluptas
+            unde eius iusto. <br />
+            ปิกอัพแพทยสภาราเมนจิตเภท คอนเทนเนอร์หมายปองแอร์เรซิ่น เทคเที่ยงคืนตรวจสอบไวอะกร้ารุสโซ ควีน
+            หมั่นโถวเอ็กซ์เพรสบ๊อบแอปเปิล คูลเลอร์สติ๊กเกอร์บรรพชนอิมพีเรียล อะเวอร์แม็กกาซีน ซิตี้ตังค์เกมส์วิกดีมานด์
+            แฟกซ์รีโมตอพาร์ทเมนท์แฮนด์ ราชานุญาตคลาสสิกภควัมปติเบบี้ สะเด่าโค้กฟินิกซ์เป่ายิงฉุบ โบรกเกอร์เฝอ
+            จังโก้พาวเวอร์บัส เจี๊ยวพุทธศตวรรษชัตเตอร์ซานตาคลอส เก๊ะ แชมปิยอง
+          </Text>
+          <div>
+            <ButtonPrimary>Primary</ButtonPrimary>
+            <ButtonPrimary disabled>Disabled</ButtonPrimary>
+            <ButtonSecondary>Secondary</ButtonSecondary>
+            <ButtonSecondary disabled>Disabled</ButtonSecondary>
+            <ButtonOutlined>Secondary</ButtonOutlined>
+            <ButtonOutlined disabled>Disabled</ButtonOutlined>
+          </div>
+
+          <div>
+            <Input required title="Username" />
+            <ModalTemplate />
+          </div>
         </div>
       </div>
-    </>
+    </ThemeProvider>
   )
 }
 

src/components/Buttons/ButtonOutlined.tsx

@@ -0,0 +1,15 @@
+const classRegular =
+  'rounded-[5px] bg-transparent border border-[#FFF0BF] px-4 py-2 font-body font-normal text-primary_yellow-100 transition-colors duration-300 hover:text-[#FFF0BF]'
+const classDisabled =
+  'cursor-not-allowed rounded-[5px] border border-[#BAB39D] px-4 py-2 font-body font-normal text-[#9D9477]'
+const ButtonOutlined: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element => {
+  return (
+    <button {...props} className={props.disabled ? classDisabled : classRegular}>
+      {props.children}
+    </button>
+  )
+}
+
+export default ButtonOutlined

src/components/Buttons/ButtonPrimary.tsx

@@ -0,0 +1,14 @@
+const classRegular =
+  'rounded-[5px] bg-primary_yellow-100 px-4 py-2 font-body font-normal text-primary-200 transition-colors duration-300 hover:bg-primary_yellow-300 hover:text-primary-300'
+const classDisabled = 'cursor-not-allowed rounded-[5px] bg-[#FFF0BF] px-4 py-2 font-body font-normal text-[#A5A6A7]'
+const ButtonPrimary: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element => {
+  return (
+    <button {...props} className={props.disabled ? classDisabled : classRegular}>
+      {props.children}
+    </button>
+  )
+}
+
+export default ButtonPrimary

src/components/Buttons/ButtonSecondary.tsx

@@ -0,0 +1,14 @@
+const classRegular =
+  'rounded-[5px] bg-[#8AD5F4] px-4 py-2 font-body font-normal text-primary-100 transition-colors duration-300 hover:bg-secondary_blue-100 hover:text-primary-300'
+const classDisabled = 'cursor-not-allowed rounded-[5px] bg-[#D1F2FF] px-4 py-2 font-body font-normal text-primary-400'
+const ButtonSecondary: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement>> = ({
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element => {
+  return (
+    <button {...props} className={props.disabled ? classDisabled : classRegular}>
+      {props.children}
+    </button>
+  )
+}
+
+export default ButtonSecondary

src/components/Form/Input.tsx

@@ -0,0 +1,17 @@
+import { Input as AntdInput, InputProps } from 'antd'
+
+const Input: React.FC<InputProps> = ({ ...props }: InputProps) => {
+  return (
+    <div className="flex flex-col">
+      <label className="font-body text-text_color-100">
+        {props.title} {props.required && <span className="text-primary_yellow-100">*</span>}
+      </label>
+      <AntdInput
+        {...props}
+        className="rounded-[5px] bg-white px-3 py-2 text-primary_yellow-100 focus:text-primary-100 focus:shadow-[0_4px_6px_0px_rgba(138,213,244,0.25)] focus:outline-none focus:ring-2 focus:ring-[#8AD5F4]"
+      />
+    </div>
+  )
+}
+
+export default Input

src/components/ModalTemplate.tsx

@@ -0,0 +1,51 @@
+import { Modal as AntModal } from 'antd'
+import React, { useState } from 'react'
+import ButtonPrimary from './Buttons/ButtonPrimary'
+
+const ModalTemplate: React.FC = (): JSX.Element => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+
+  return (
+    <>
+      <ButtonPrimary onClick={() => setIsModalOpen(true)}>Open Modal</ButtonPrimary>
+      <AntModal
+        open={isModalOpen}
+        className="size-[800px]"
+        classNames={{
+          body: 'bg-transparent',
+          header: 'bg-transparent',
+          footer: 'bg-transparent text-center',
+          content: 'bg-gradient-to-br from-[#132635] to-[#1E3B52] rounded-[25px]'
+        }}
+        closable={false}
+        footer={[
+          <ButtonPrimary key="confirm" onClick={() => setIsModalOpen(false)}>
+            ยืนยัน
+          </ButtonPrimary>
+        ]}
+      >
+        <h1 className="mb-5 text-center font-heading text-2xl text-primary_yellow-100">หมวดอัลกอริทึม</h1>
+        <p className="font-body text-lg font-normal text-text_color-100">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos dolores, veritatis qui error perspiciatis neque
+          ratione vitae architecto nam, dolore eum repellendus laudantium, commodi fugiat. Doloribus voluptas unde eius
+          iusto. <br />
+          ปิกอัพแพทยสภาราเมนจิตเภท คอนเทนเนอร์หมายปองแอร์เรซิ่น เทคเที่ยงคืนตรวจสอบไวอะกร้ารุสโซ ควีน
+          หมั่นโถวเอ็กซ์เพรสบ๊อบแอปเปิล คูลเลอร์สติ๊กเกอร์บรรพชนอิมพีเรียล อะเวอร์แม็กกาซีน ซิตี้ตังค์เกมส์วิกดีมานด์
+          แฟกซ์รีโมตอพาร์ทเมนท์แฮนด์ ราชานุญาตคลาสสิกภควัมปติเบบี้ สะเด่าโค้กฟินิกซ์เป่ายิงฉุบ โบรกเกอร์เฝอ
+          จังโก้พาวเวอร์บัส เจี๊ยวพุทธศตวรรษชัตเตอร์ซานตาคลอส เก๊ะ แชมปิยอง
+        </p>
+        <p className="font-body text-lg font-normal text-text_color-100">
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos dolores, veritatis qui error perspiciatis neque
+          ratione vitae architecto nam, dolore eum repellendus laudantium, commodi fugiat. Doloribus voluptas unde eius
+          iusto. <br />
+          ปิกอัพแพทยสภาราเมนจิตเภท คอนเทนเนอร์หมายปองแอร์เรซิ่น เทคเที่ยงคืนตรวจสอบไวอะกร้ารุสโซ ควีน
+          หมั่นโถวเอ็กซ์เพรสบ๊อบแอปเปิล คูลเลอร์สติ๊กเกอร์บรรพชนอิมพีเรียล อะเวอร์แม็กกาซีน ซิตี้ตังค์เกมส์วิกดีมานด์
+          แฟกซ์รีโมตอพาร์ทเมนท์แฮนด์ ราชานุญาตคลาสสิกภควัมปติเบบี้ สะเด่าโค้กฟินิกซ์เป่ายิงฉุบ โบรกเกอร์เฝอ
+          จังโก้พาวเวอร์บัส เจี๊ยวพุทธศตวรรษชัตเตอร์ซานตาคลอส เก๊ะ แชมปิยอง
+        </p>
+      </AntModal>
+    </>
+  )
+}
+
+export default ModalTemplate

src/index.css

@@ -2,6 +2,92 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    @font-face {
+        font-family: 'Chonburi';
+        src: url(./fonts/Chonburi/Chonburi-Regular.ttf) format('truetype');
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-Thin.ttf') format('truetype');
+        font-weight: 100;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-ExtraLight.ttf') format('truetype');
+        font-weight: 200;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-Light.ttf') format('truetype');
+        font-weight: 300;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-Regular.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-Medium.ttf') format('truetype');
+        font-weight: 500;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-SemiBold.ttf') format('truetype');
+        font-weight: 600;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'IBM Plex Sans';
+        src: url('./fonts/IBMPlexSans/IBMPlexSansThaiLooped-Bold.ttf') format('truetype');
+        font-weight: bold;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Lora';
+        src: url(./fonts/Lora/Lora-VariableFont_wght.ttf) format('truetype');
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Lora';
+        src: url(./fonts/Lora/Lora-Italic-VariableFont_wght.ttf) format('truetype');
+        font-style: italic;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: 'Sparky Stones';
+        src: url(./fonts/SparkyStones/SparkyStonesRegular-BW6ld.ttf) format('truetype');
+        font-style: normal;
+        font-display: swap;
+    }
+}
+
 * {
     box-sizing: border-box;
     margin: 0;

src/lib/ThemeProvider.tsx

@@ -0,0 +1,19 @@
+import { ConfigProvider, ThemeConfig, theme } from 'antd'
+
+const customTheme: ThemeConfig = {
+  token: {
+    colorPrimary: '#274464',
+    colorBgBase: '#0e1823',
+    colorError: '#f48a8a',
+    colorInfo: '#63a4ff',
+    fontSize: 16,
+    fontFamily: 'Lora, IBM Plex Sans'
+  },
+  algorithm: theme.darkAlgorithm
+}
+
+const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  return <ConfigProvider theme={customTheme}>{children}</ConfigProvider>
+}
+
+export default ThemeProvider