Bagian ini tidak berkaitan secara langsung dengan framework. Styling pada dasarnya mengikuti struktur dan susunan komponen yang digunakan.

Dokumentasi ini membahas implementasi komponen menggunakan Laravel, Inertia, Tailwind CSS, dan React.js.

Sebelum memulai, pastikan seluruh environment dan dependensi yang dibutuhkan telah terpasang dengan benar.

npm install @tailwindcss/vite tailwindcss chart.js react-chartjs-2 react-hook-form yup @hookform/resolvers @inertiajs/react @inertiajs/vite react react-dom @vitejs/plugin-react
        

Letakkan font Poppins pada direktori public/assets/fonts.

Letakkan file logo pada public/assets/images/logo.svg.

Buat struktur folder berikut untuk menempatkan file komponen sesuai dengan kategorinya:

resources/"
├── css/"
│   └── app.css"
└── js/"
    └── Components/"
        ├── utils/"
        │   └── formatText.js"
        ├── layouts/"
        │   ├── AppLayout.jsx"
        │   └── components/"
        │       ├── BottomNav.jsx"
        │       ├── ContentFooter.jsx"
        │       ├── ContentHeader.jsx"
        │       ├── ContentSection.jsx"
        │       └── Sidebar.jsx"
        └── common/"
            ├── Accordion.jsx        Badge.jsx"
            ├── BottomSheet.jsx      Breadcrumb.jsx"
            ├── Button.jsx           CardWrapper.jsx"
            ├── ChartBar.jsx         ChartDoughnut.jsx"
            ├── ChartLine.jsx        ChartPie.jsx"
            ├── DataWrapper.jsx      ExportDocs.jsx"
            ├── Filter.jsx           FormExample.jsx"
            ├── FormField.jsx        FormFieldset.jsx"
            ├── FormFloat.jsx        FormImageCropper.jsx"
            ├── LoadingBar.jsx       LoadingPulse.jsx"
            ├── LoadingSpinner.jsx   Modal.jsx"
            ├── NoData.jsx           Pagination.jsx"
            ├── SectionTitle.jsx     Stepper.jsx"
            ├── Table.jsx            Timeline.jsx"
            ├── Toast.jsx            Toggle.jsx"
            └── Tooltip.jsx"
        

File layout utama ditempatkan di resources/js/Components/layouts.

Komponen seperti BottomNav, ContentFooter, ContentHeader, ContentSection, dan Sidebar ditempatkan di resources/js/Components/layouts/components.

File formatText.js ditempatkan di resources/js/Components/utils.

Seluruh komponen lainnya dapat ditempatkan di resources/js/Components/common.