> ## 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.

# การประกาศ ตัวแปร

export const CLASSIFICATION_TERMS = {
  positive: {
    must: '+MUST',
    should: '+SHOULD',
    optional: '+OPTIONAL'
  },
  negative: {
    must: '-MUST',
    should: '-SHOULD',
    optional: '-OPTIONAL'
  }
};

export const TextHighlight = ({text = '', positive = false, negative = false}) => {
  let textColor = undefined;
  let bgColor = undefined;
  if (positive) {
    textColor = 'black';
    bgColor = 'oklch(72.77% 0.1798 128.27)';
  }
  if (negative) {
    textColor = 'black';
    bgColor = 'oklch(51.73% 0.2119 28.74)';
  }
  return <div style={{
    display: 'inline-block',
    fontWeight: 'bold',
    paddingLeft: '4px',
    paddingRight: '4px',
    border: '1px solid',
    borderRadius: '8px',
    color: textColor,
    backgroundColor: bgColor
  }}>
      {text}
    </div>;
};

## การ Import

* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้การย่อ path เสมอ เพื่อลดความยากในการอ่าน
* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ถ้าใช้การ auto import กรุณาตรวจสอบความถูกต้องทุกครั้ง
  ```ts theme={null}
  import { Role } from '@/variables';

  /// หรือ ถ้ามี type ด้วย
  import { type RoleVariable, Role } from '@/variables';
  ```

## ตัวแปรทั่วไป Common

* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้ `const` ถ้าไม่ต้องมีการเปลี่ยนแปลงค่า
* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้ `let` ถ้าต้องมีการเปลี่ยนแปลงค่า
* <TextHighlight negative text={ CLASSIFICATION_TERMS.negative.must } /> ห้ามใช้ `var` [เหตุผล](https://medium.com/@darshan.unadkat/avoid-using-var-in-javascript-422394ed11a3)
* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ระบุ type ตามความเหมาะสม
* <TextHighlight negative text={ CLASSIFICATION_TERMS.negative.should } /> ใช้ any เมื่อจำเป็นเท่านั้น ไม่ใช้เลยดีที่สุด

<Icon icon={'circle-check'} color={'#85bb23'} size={32} /> ทำ

```ts theme={null}
const list: Array<string> = [];
const obj: Record<string, any> = {};
let counter = 0;
```

<Icon icon={'circle-xmark'} color={'#c50005'} size={32} /> ไม่ทำ

```ts theme={null}
var list1 = [];
const list2 = [];

var obj = {};

var counter1: number = 0;
let counter2: number = 0;
```

## ตัวแปรที่เป็น React State

* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้ `const` เท่านั้น
* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ระบุ type ตามความเหมาะสม
* <TextHighlight negative text={ CLASSIFICATION_TERMS.negative.should } /> ใช้ any เมื่อจำเป็นเท่านั้น ไม่ใช้เลยดีที่สุด

<Icon icon={'circle-check'} color={'#85bb23'} size={32} /> ทำ

```ts theme={null}
const [ counter, setCounter ] = useState(0);
const [ listData, setListData ] = useState<Array<number>>([]);
```

<Icon icon={'circle-xmark'} color={'#c50005'} size={32} /> ไม่ทำ

```ts theme={null}
let [ counter, setCounter ] = useState<number>(0);
var [ counter, setCounter ] = useState<number>(0);
let [ counter, setCounter ] = useState(0);
var [ counter, setCounter ] = useState(0);

let [ listData, setListData ] = useState([]);
var [ listData, setListData ] = useState([]);
const [ listData, setListData ] = useState([]);
```

## ตัวอย่าง Example

* ประกาศ
  ```ts theme={null}
  const [ bookDate, setBookData ] = useState<BookInfo>({ ... });
  ```

* กำหนด Type
  ```ts theme={null}
  interface BookInfo {
    isbn: string;
    author: string;
    name: string;
    date: Date;
  }
  ```