# Add new package
```
---
## 💾 Component Usage Examples
### Button Component
```tsx
import Button from '@/components/common/Button';
// Primary button
// Secondary button
// Ghost button
// Loading state
// Disabled
```
### Card Component
```tsx
import { Card, CardBody, CardHeader, CardFooter } from '@/components/common/Card';
Card Title
Main content here
```
### Badge Component
```tsx
import { Badge } from '@/components/common/Badge';
EcoLearn
Success
Error
Warning
Info
```
### StreakIndicator Component
```tsx
import { StreakIndicator } from '@/components/common/StreakIndicator';
```
---
## 🪝 Hook Usage
### useAuth Hook
```tsx
import { useAuth } from '@/lib/hooks/useAuth';
export const MyComponent = () => {
const { user, loading, error } = useAuth();
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
if (!user) return Not logged in
;
return Welcome, {user.email}!
;
};
```
### useProfile Hook
```tsx
import { useProfile } from '@/lib/hooks/useProfile';
import { useAuth } from '@/lib/hooks/useAuth';
export const ProfilePage = () => {
const { user } = useAuth();
const { profile, loading, updateProfile } = useProfile(user?.id);
const handleUpdate = async () => {
await updateProfile({ bio: 'New bio' });
};
return {profile?.username}
;
};
```
---
## ✔️ Validation Utilities
```tsx
import { validators } from '@/lib/utils/validators';
// Email validation
validators.email('test@email.com') // true/false
// Password validation
const { valid, errors } = validators.password('MyPass123');
// returns: { valid: true/false, errors: string[] }
// Username validation
const { valid, error } = validators.username('john_doe');
// returns: { valid: true/false, error?: string }
// Password match
validators.passwordMatch('password123', 'password123') // true/false
```
---
## 🔥 Streak Utilities
```tsx
import { streakUtils } from '@/lib/utils/streakUtils';
// Calculate multiplier
streakUtils.calculateMultiplier(7) // 1.2
streakUtils.calculateMultiplier(30) // 1.5
streakUtils.calculateMultiplier(365) // 2.0
// Calculate daily reward
streakUtils.calculateDailyReward(50, 1.2) // 60
// Format streak display
streakUtils.formatStreakDisplay(7) // "1 minggu 🎉"
// Get milestone message
streakUtils.getMilestoneMessage(30) // "Wow! Anda sudah 30 hari..."
// Get days until next milestone
streakUtils.getDaysUntilNextMilestone(7)
// { days: 23, milestone: 30 }
```
---
## 🌐 API Routes
### Signup
```bash
POST /api/auth/signup
Content-Type: application/json
{
"email": "user@example.com",
"password": "SecurePass123",
"username": "john_doe"
}
Response (201):
{
"message": "Pendaftaran berhasil...",
"user": { ... }
}
```
### Login
```bash
POST /api/auth/login
Content-Type: application/json
{
"email": "user@example.com",
"password": "SecurePass123"
}
Response (200):
{
"message": "Login berhasil",
"user": { ... },
"session": { ... }
}
```
### Logout
```bash
POST /api/auth/logout
Response (200):
{
"message": "Logout berhasil"
}
```
---
## 📱 Responsive Breakpoints
```
Mobile: < 640px
Tablet: 640px - 1023px (md: prefix)
Desktop: 1024px+ (lg: prefix)
Examples:
Responsive grid: 1 col mobile, 2 col tablet, 4 col desktop
Responsive padding: 4 mobile, 8 desktop
```
---
## 🔐 Protected Route Pattern
```tsx
// app/(protected)/my-page/page.tsx
'use client';
import { useAuth } from '@/lib/hooks/useAuth';
import { useRouter } from 'next/navigation';
import { PAGE_ROUTES } from '@/lib/utils/constants';
export default function MyPage() {
const { user, loading } = useAuth();
const router = useRouter();
// Redirect if not authenticated
useEffect(() => {
if (!loading && !user) {
router.push(PAGE_ROUTES.LOGIN);
}
}, [user, loading, router]);
if (loading) return Loading...
;
if (!user) return null;
return Protected content
;
}
```
---
## 🎨 Layout Pattern
```tsx
{/* Container with max width and responsive padding */}
{/* Title section */}
Page Title
Subtitle
{/* Content grid */}