Falcon Library Components

Falcon Library Components เป็นชุดของ React Components ที่พัฒนาด้วย TypeScript เพื่อช่วยให้การสร้าง UI และ Layout ในโปรเจ็กต์ของคุณง่ายขึ้น และรองรับการใช้งานร่วมกับ Next.js และ Ant Design โดยประกอบไปด้วย Components เช่น NavBar, SideBar, BreadCrumb และ Input ที่สามารถปรับแต่งได้ตามต้องการ

Features

• NavBar: แถบ Navigation Bar พร้อมรองรับเมนูและโลโก้
• SideBar: Sidebar สำหรับเมนูทางด้านซ้าย พร้อมรองรับการปรับแต่ง
• BreadCrumb: แสดงเส้นทางหรือตำแหน่งปัจจุบันของหน้า
• Input Components: รองรับ Input หลายรูปแบบ เช่น Email, Telephone, Number, Percent, Currency, Latitude และ Longitude
• Customizable: รองรับการปรับแต่งด้วย Props และ CSS
• TypeScript: เขียนด้วย TypeScript เพื่อให้ใช้งานง่ายและปลอดภัย

Installation

ติดตั้ง Library ผ่าน github และ npm :

npm install https://github.com/TTTBrother-Co-Ltd/framework-falcon-library-react.git;

หรือ 

npm install falcon-library-comp;

Usage

NavBar

ใช้สำหรับสร้างแถบ Navigation Bar พร้อมเมนูและโลโก้ ตัวอย่างการใช้งาน :

import { NavBar } from 'falcon-library-comp';
import { HomeOutlined, InfoCircleOutlined, PhoneOutlined } from '@ant-design/icons';

const NavItem = [
  { key: 'home', label: 'Home', icon: <HomeOutlined /> },
  { key: 'about', label: 'About', icon: <InfoCircleOutlined /> },
  { key: 'contact', label: 'Contact', icon: <PhoneOutlined /> },
];

<NavBar
  items={NavItem}
  logo="https://example.com/logo.png"
  mode="horizontal"
  style={{ backgroundColor: '#001529' }}
  onMenuClick={(key) => console.log(`Menu clicked: ${key}`)}
/>;

SideBar

ใช้สำหรับสร้างเมนู Sidebar ด้านซ้ายที่สามารถปรับแต่งได้ ตัวอย่างการใช้งาน :

import { SideBar } from 'falcon-library-comp';

const SideItem = [
  { key: 'home', label: 'Home', icon: <HomeOutlined /> },
  { key: 'about', label: 'About Us', icon: <InfoCircleOutlined /> },
  { key: 'contact', label: 'Contact', icon: <PhoneOutlined /> },
];

<SideBar
  items={SideItem}
  logo={<img src="https://example.com/logo.png" alt="Logo" style={{ height: '40px' }} />}
  header={<div>My App</div>}
  footer={<div>© 2025 My App</div>}
  onItemClick={(key) => console.log(`Sidebar clicked: ${key}`)}
  style={{ backgroundColor: '#001529' }}
/>;

BreadCrumb

ใช้สำหรับแสดงเส้นทางปัจจุบันของหน้า ตัวอย่างการใช้งาน :

import { BreadCrumb } from 'falcon-library-comp';

const breadcrumbItems = [
  { key: 'home', label: 'Home', href: '/' },
  { key: 'category', label: 'Category', href: '/category' },
  { key: 'product', label: 'Product' },
];

<BreadCrumb
  items={breadcrumbItems}
  separator=">"
  style={{ marginBottom: '20px' }}
  onItemClick={(key) => console.log(`Breadcrumb clicked: ${key}`)}
/>;

Input Components

รองรับ Input หลากหลายรูปแบบ เช่น Email, Telephone, และอื่น ๆ ตัวอย่างการใช้งาน :

Input Email

import { InputEmail } from 'falcon-library-comp';

<InputEmail
  label="Email Address"
  value=""
  placeholder="Enter your email"
  onChange={(value) => console.log(`Email: ${value}`)}
/>;

Input Telephone

import { InputTelephone } from 'falcon-library-comp';

<InputTelephone
  label="Telephone"
  value=""
  placeholder="Enter your telephone number"
  onChange={(value) => console.log(`Telephone: ${value}`)}
/>;

Input Number

import { InputNumber } from 'falcon-library-comp';

<InputNumber
  label="Number"
  value={}
  allowComma={true}
  placeholder="Enter a number"
  onChange={(value) => console.log(`Number: ${value}`)}
/>;

Components API

แสดงรายละเอียดของ Props แต่ละ Component

## Components API

### **NavBar**
| Prop          | Type                        | Default      | Description                              |
|---------------|-----------------------------|--------------|------------------------------------------|
| `items`       | `Array<{ key, label, icon }>` | `[]`         | รายการเมนูใน NavBar                     |
| `logo`        | `string or ReactNode`       | `undefined`  | โลโก้ใน NavBar                          |
| `mode`        | `"horizontal" | "vertical"` | `"horizontal"` | โหมดการแสดงผลของเมนู                   |
| `style`       | `CSSProperties`            | `undefined`  | Inline style                             |
| `onMenuClick` | `(key: string) => void`    | `undefined`  | Callback เมื่อคลิกเมนู                  |

---

### **SideBar**
| Prop          | Type                        | Default      | Description                              |
|---------------|-----------------------------|--------------|------------------------------------------|
| `items`       | `Array<{ key, label, icon }>` | `[]`         | รายการเมนูใน Sidebar                    |
| `logo`        | `ReactNode`                 | `undefined`  | โลโก้ใน Sidebar                         |
| `header`      | `ReactNode`                 | `undefined`  | Header ด้านบนของ Sidebar               |
| `footer`      | `ReactNode`                 | `undefined`  | Footer ด้านล่างของ Sidebar             |
| `style`       | `CSSProperties`            | `undefined`  | Inline style                             |
| `onItemClick` | `(key: string) => void`    | `undefined`  | Callback เมื่อคลิกเมนู                  |

---

### **BreadCrumb**
| Prop          | Type                        | Default      | Description                              |
|---------------|-----------------------------|--------------|------------------------------------------|
| `items`       | `Array<{ key, label, href }>` | `[]`        | รายการ Breadcrumb                       |
| `separator`   | `ReactNode`                 | `'/'`        | ตัวคั่นระหว่าง Breadcrumb              |
| `style`       | `CSSProperties`            | `undefined`  | Inline style                             |
| `onItemClick` | `(key: string) => void`    | `undefined`  | Callback เมื่อคลิก Breadcrumb           |