> ## 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 { formatNumeric } from '@/functions';

  /// หรือ ถ้ามี type ด้วย
  import { type FormatNumericFunc, formatNumeric } from '@/functions';
  ```

## รูปแบบ

* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.must } /> ใช้ arrow function และ กำหนด parameter ในรูปแบบ object เสมอ เพื่อให้โค้ดไปในทิศทางเดียวกัน และง่ายต่อการเรียกใช้งาน
* <TextHighlight positive text={ CLASSIFICATION_TERMS.positive.should } /> ใส่ return type เมื่อจำเป็น (ใส่ตลอดได้ยิ่งดี)

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

  ```ts theme={null}
  const sampleFunc = () => { ... }

  const sampleFunc = ({ firstParam, secondParam, ... }: SampleFuncParams) => {
    ...
    return '';
  }

  const sampleFunc = ({ firstParam, secondParam, ... }: SampleFuncParams): string => {
    ...
    return '';
  }
  ```

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

  ```ts theme={null}
  function sampleFunc() { ... }

  function sampleFunc(firstParam: string, secondParam: string) {
    ...
    return '';
  }

  const sampleFunc = (firstParam: string, secondParam: string): string => {
    ...
    return '';
  }
  ```

## ตัวอย่าง Example

* ประกาศ
  ```ts theme={null}
  const formatNumeric = ({ value, minFractionDigit = 0, maxFractionDigit = 0 }: FormatNumericInput): string => {
    ...
  }
  ```

* กำหนด Type
  ```ts theme={null}
  interface FormatNumericInput {
    value?: number | null;
    minFractionDigit?: number;
    maxFractionDigit?: number;
  }
  ```

* ใช้งาน
  ```ts theme={null}
  const formatted = formatNumeric({ value: 1234.56, minFractionDigit: 2, maxFractionDigit: 4 });
  ```