> ## Documentation Index
> Fetch the complete documentation index at: https://styleguide-nextjs.2smooth.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Pattern

export const AlertBox = ({children, type = 'danger'}) => {
  let bgColor = undefined;
  switch (type) {
    case 'success':
      bgColor = 'oklch(72.77% 0.1798 128.27 / 50)';
    case 'warning':
      bgColor = 'oklch(86.06% 0.1731 91.94 / 50)';
    case 'danger':
      bgColor = 'oklch(51.73% 0.2119 28.74 / 50)';
  }
  return <div style={{
    backgroundColor: bgColor,
    borderRadius: '4px',
    padding: '4px',
    fontSize: '24px'
  }}>
      {children}
    </div>;
};

<AlertBox>
  <span>ยังไม่ได้ข้อสรุป ว่าจะใช้ pattern แบบไหน</span>

  <br />

  <span>อาจมีการเปลี่ยนแปลงอีกในอนาคต</span>
</AlertBox>

* ใช้ pattern ที่ดัดแปลงจาก `Atomic Break Down Pattern` และ `Modular Group Pattern`
  * จัดกลุ่มของการทำงานที่เกี่ยวข้องให้อยู่ด้วยกัน
  * แยกส่วนที่ซ้ำซ้อนออกจากกัน
  * ควบคุมปริมาณของโค้ดต่อไฟล์ได้ง่าย
* ผลลัพธ์การปรับแต่ง

  ```
  src/
  ├── features/
  │   ├── auth/
  │   │   ├── index.tsx
  │   │   ├── auth.main.tsx
  │   │   ├── auth.model.tsx
  │   │   ├── auth.module.css
  │   │   └── auth.test.tsx
  │   └── dashboard/
  │       ├── index.tsx
  │       ├── dashboard.container.tsx
  │       ├── dashboard.content.tsx
  │       ├── dashboard.model.tsx
  │       ├── dashboard.module.css
  │       └── dashboard.test.tsx
  └── components/
      ├── shared/
      │   └── <component-name>/
      │       ├── <component-name>.container.tsx
      │       ├── <component-name>.content.tsx
      │       ├── <component-name>.model.tsx
      │       ├── <component-name>.module.css
      │       └── <component-name>.test.tsx
      ├── auth/
      └── dashboard/
  ```

  * ปรับแต่งจาก `Atomic Break Down Pattern`

  ```
  src/
  ├── components/
  │   ├── atoms/
  │   │   ├── Button.js
  │   │   └── Input.js
  │   ├── molecules/
  │   │   ├── SearchBar.js
  │   │   └── UserCard.js
  │   ├── organisms/
  │   │   ├── Header.js
  │   │   └── Footer.js
  │   └── templates/
  │       ├── HomeTemplate.js
  │       └── ProfileTemplate.js
  ├── pages/
  │   ├── Home.js
  │   └── Profile.js
  └── App.js
  ```

  * และปรับแต่งจาก `Modular Group Pattern`

  ```
  src/
  ├── modules/
  │   ├── auth/
  │   │   ├── components/
  │   │   ├── services/
  │   │   ├── styles/
  │   │   └── tests/
  │   └── dashboard/
  │       ├── components/
  │       ├── services/
  │       ├── styles/
  │       └── tests/
  └── shared/
      └── components/
  ```