gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-22 14:25:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(FE): revert require auth component

Browse Source
This commit is contained in:
randy-ar
2025-12-10 13:35:42 +07:00
parent eed142a85f
commit f48cfca650
2 changed files with 33 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dropdown/README.md
-83
View File
@@ -1,83 +0,0 @@
# Dropdown Component
Komponen Dropdown reusable berdasarkan DaisyUI yang mengatasi issue children component yang ter-render sebelum dropdown dibuka.
## Features
- ✅ **Conditional Rendering**: Children hanya di-render ketika dropdown aktif/terbuka
- ✅ **Click Outside to Close**: Otomatis menutup dropdown ketika klik di luar area dropdown
- ✅ **Multiple Positions**: Support berbagai posisi (top, bottom, left, right) dengan alignment (start, center, end)
- ✅ **Hover Support**: Optional hover mode untuk membuka dropdown
- ✅ **Customizable**: Mendukung custom className untuk container dan content
## Usage
### Basic Example
```tsx
import Dropdown from '@/components/dropdown/Dropdown';
import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem';
<Dropdown
trigger={
<button className="btn">Click Me</button>
}
>
<Menu className="p-2 bg-base-100 shadow rounded-box menu-sm w-52">
<MenuItem title="Item 1" onClick={() => console.log('Item 1')} />
<MenuItem title="Item 2" onClick={() => console.log('Item 2')} />
</Menu>
</Dropdown>
```
### With Position
```tsx
<Dropdown
position="bottom-end"
trigger={<button className="btn">Dropdown</button>}
contentClassName="w-52 mt-3"
>
{/* Your content */}
</Dropdown>
```
### Hover Mode
```tsx
<Dropdown
hover={true}
trigger={<button className="btn">Hover Me</button>}
>
{/* Your content */}
</Dropdown>
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `trigger` | `ReactNode` | - | **Required**. Element yang akan men-trigger dropdown |
| `children` | `ReactNode` | - | **Required**. Content dropdown yang akan ditampilkan |
| `position` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'` | `'bottom'` | Posisi dropdown relatif terhadap trigger |
| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Alignment dropdown (digunakan jika position tidak mengandung alignment) |
| `hover` | `boolean` | `false` | Aktifkan mode hover untuk membuka dropdown |
| `className` | `string` | - | Custom className untuk container dropdown |
| `contentClassName` | `string` | - | Custom className untuk content dropdown |
## Position Examples
- `bottom` - Dropdown muncul di bawah, align ke start
- `bottom-end` - Dropdown muncul di bawah, align ke end
- `bottom-center` - Dropdown muncul di bawah, align ke center
- `top-start` - Dropdown muncul di atas, align ke start
- `left-end` - Dropdown muncul di kiri, align ke end
- Dan seterusnya...
## Key Benefits
1. **Performance**: Children tidak di-render sampai dropdown dibuka, menghemat resources
2. **Clean State**: Setiap kali dropdown dibuka, children di-render fresh
3. **DaisyUI Compatible**: Menggunakan class DaisyUI yang sudah ada
4. **Accessible**: Menggunakan proper ARIA attributes dan keyboard navigation