### Button Component Examples (TypeScript)
Source: https://context7.com/yselimcn/fds-ai/llms.txt
Demonstrates various configurations of a versatile Button component in TypeScript. It showcases different variants, sizes, icon modes, disabled states, and custom styling options. This component is built with accessibility in mind, including focus-visible states.
```typescript
import { Button } from '@/components/ui/button';
import { Trash2, Plus } from 'lucide-react';
function ButtonExamples() {
return (
{/* Standard button variants */}
{/* Button sizes */}
{/* Icon buttons (square aspect ratio) */}
{/* Buttons with icons and text */}
{/* Disabled state */}
{/* As child (renders anchor tag styled as button) */}
{/* Custom styling */}
);
}
```
--------------------------------
### React Theme Provider System with next-themes
Source: https://context7.com/yselimcn/fds-ai/llms.txt
Provides a dual-layer theming system for light/dark mode and custom product themes using next-themes. It integrates into the application layout and allows dynamic theme switching in client components. Dependencies include next-themes.
```typescript
// app/layout.tsx
import { ThemeProvider } from '@/providers/theme-provider';
import { ProductThemeProvider } from '@/providers/product-theme-provider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```typescript
// Component usage
'use client'
import { useTheme } from 'next-themes';
import { useProductTheme } from '@/providers/product-theme-provider';
function ThemeControls() {
const { theme, setTheme } = useTheme(); // 'light' | 'dark' | 'system'
const { themeSet, setThemeSet } = useProductTheme(); // 'default' | 'parasut' | 'bizmu'
return (
{/* Light/Dark mode toggle */}
{/* Product theme switcher */}
{/* Result: Sets data-theme-set="parasut" on + stores in localStorage */}
);
}
```
--------------------------------
### Fetch TRY-based Currency Exchange Rates API
Source: https://context7.com/yselimcn/fds-ai/llms.txt
This API endpoint retrieves real-time exchange rates for USD, EUR, and GBP against TRY. It implements a 5-minute caching mechanism for performance and includes error handling for fetch failures. The response structure contains purchase and sale rates for each currency.
```typescript
// GET /api/currency-rates
// Returns exchange rates with 5-minute cache (revalidate: 300)
const response = await fetch('/api/currency-rates', {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
});
const data = await response.json();
/* Response structure:
{
Data: {
Currency: [
{
CurrencyCode: "USD",
PurchaseRate: "34.8532",
SaleRate: "35.0232"
},
{
CurrencyCode: "EUR",
PurchaseRate: "38.2145",
SaleRate: "38.3912"
},
{
CurrencyCode: "GBP",
PurchaseRate: "44.5621",
SaleRate: "44.7534"
}
]
},
Date: "2025-10-08"
}
*/
// Error handling
if (!response.ok) {
// 502: Unable to retrieve rates from both primary and fallback sources
// 500: Server error during fetch
console.error('Failed to fetch currency rates');
}
```
--------------------------------
### Currency Exchange Rate API
Source: https://context7.com/yselimcn/fds-ai/llms.txt
Fetches real-time TRY-based exchange rates for USD, EUR, and GBP. The API response is cached for 5 minutes.
```APIDOC
## GET /api/currency-rates
### Description
Fetches real-time TRY-based exchange rates for USD, EUR, and GBP with automatic fallback and caching.
### Method
GET
### Endpoint
/api/currency-rates
### Parameters
#### Query Parameters
None
#### Request Body
None
### Request Example
```
{
"example": "GET /api/currency-rates"
}
```
### Response
#### Success Response (200)
- **Data** (object) - Contains currency exchange rate information.
- **Currency** (array) - An array of currency objects.
- **CurrencyCode** (string) - The three-letter currency code (e.g., "USD").
- **PurchaseRate** (string) - The purchase exchange rate.
- **SaleRate** (string) - The sale exchange rate.
- **Date** (string) - The date the rates were fetched.
#### Response Example
```json
{
"Data": {
"Currency": [
{
"CurrencyCode": "USD",
"PurchaseRate": "34.8532",
"SaleRate": "35.0232"
},
{
"CurrencyCode": "EUR",
"PurchaseRate": "38.2145",
"SaleRate": "38.3912"
},
{
"CurrencyCode": "GBP",
"PurchaseRate": "44.5621",
"SaleRate": "44.7534"
}
]
},
"Date": "2025-10-08"
}
```
#### Error Handling
- **502** - Unable to retrieve rates from both primary and fallback sources.
- **500** - Server error during fetch.
```
--------------------------------
### Currency Data and Selector (TypeScript)
Source: https://context7.com/yselimcn/fds-ai/llms.txt
Provides centralized currency data constants and a functional CurrencySelector component using TypeScript. It demonstrates how to use imported currency data for rendering options in a select dropdown and handling currency code processing. Dependencies include '@/lib/currency' for data and types, and a 'useDictionary' hook for translations.
```typescript
import { CURRENCY_DATA } from '@/lib/currency';
import type { CurrencyCode, CurrencyItem } from '@/lib/currency';
// Currency data structure
/*
CURRENCY_DATA = [
{ id: 1, symbol: '₺', labelKey: 'try' },
{ id: 2, symbol: '$', labelKey: 'usd', code: 'USD' },
{ id: 3, symbol: '€', labelKey: 'eur', code: 'EUR' },
{ id: 4, symbol: '£', labelKey: 'gbp', code: 'GBP' },
]
*/
function CurrencySelector() {
const dict = useDictionary();
const [selectedId, setSelectedId] = useState(1);
const selectedCurrency = CURRENCY_DATA.find(c => c.id === selectedId);
const currencyCode: CurrencyCode | undefined = selectedCurrency?.code;
return (
);
}
// Type-safe currency code handling
function processCurrency(code: CurrencyCode) {
// code is strictly typed as 'USD' | 'EUR' | 'GBP'
const apiUrl = `/api/rates?currency=${code}`;
// ...
}
```
--------------------------------
### Type-Safe Internationalization with Turkish Translations
Source: https://context7.com/yselimcn/fds-ai/llms.txt
Implements a type-safe internationalization (i18n) system with Turkish translations. It allows fetching translations for server and client components and provides a clear structure for adding new translations. The system leverages TypeScript for type safety.
```typescript
// Server components
import { getDictionary } from '@/lib/dictionary';
async function ServerPage() {
const dict = await getDictionary();
return
{dict.page.home.title}
; // "Lorem ipsum dolor sit amet"
}
```
```typescript
// Client components
'use client'
import { useDictionary } from '@/providers/dictionary-provider';
function ClientComponent() {
const dict = useDictionary();
return (
);
}
```
```typescript
// Adding new translations
// Edit src/locales/tr.ts:
const dictionary = {
component: {
new_component: {
label: 'Yeni Bileşen',
error: {
required: 'Bu alan zorunludur',
},
},
},
} as const;
// TypeScript enforces type safety via Dictionary type
```
--------------------------------
### Formatted Numeric Input Component
Source: https://context7.com/yselimcn/fds-ai/llms.txt
A locale-aware input component that supports thousand separators, decimal precision, and currency/percentage modes. It handles formatting on blur and offers options for currency symbols, discount toggles, and exchange rate displays. It is built using TypeScript and React.
```typescript
'use client'
import { FormattedInput } from '@/components/customized/input-formatted';
import { useState } from 'react';
function PriceInput() {
const [price, setPrice] = useState(0);
const [discount, setDiscount] = useState(0);
const [discountMode, setDiscountMode] = useState<'currency' | 'percentage'>('currency');
return (
{/* Currency input with ₺ symbol */}
{/* Result: User types "1234567.89" → Displays "1.234.567,89 ₺" on blur */}
{/* Discount with currency/percentage toggle */}
{/* Click button toggles between "₺" and "%" */}
{/* Exchange rate input with type toggle and reset */}
console.log(val)}
decimalLimit={4}
selectedCurrencySymbol="$"
showExchangeRateType
exchangeRateType="Satış"
onExchangeRateTypeChange={(type) => console.log(type)}
showReset
onReset={() => console.log('Reset to API rate')}
/>
{/* Displays: "₺ / $ Satış" with reset button */}
);
}
```
--------------------------------
### Date Picker Component
Source: https://context7.com/yselimcn/fds-ai/llms.txt
A locale-aware date picker component using date-fns and react-day-picker, featuring dropdown navigation for months and years. It defaults to Turkish locale and displays dates in a specific format. The component auto-closes upon selection and shows a placeholder when empty. Also includes a DateRangePicker for form integration.
```typescript
'use client'
import { DatePicker } from '@/components/ui/date-picker';
function DateSelection() {
return (
{/* Features:
* - Turkish locale by default (date-fns/locale/tr)
* - Format: "8 Ekim 2025" (d MMMM yyyy)
* - Dropdown month/year navigation
* - Auto-closes on date selection
* - Displays "Tarih seçiniz" placeholder when empty
*/}
);
}
// For forms with react-hook-form:
import { DateRangePicker } from '@/components/ui/date-range-picker';
import type { DateRange } from 'react-day-picker';
function ReportDateRange() {
const [dateRange, setDateRange] = useState();
return (
);
}
```
--------------------------------
### Currency Section Component for UI Interaction
Source: https://context7.com/yselimcn/fds-ai/llms.txt
A complete UI component for currency selection and display, built for client-side interactivity. It allows users to select currencies, toggle between purchase and sale rates, manually override rates, and reset to API-fetched values. The component integrates seamlessly with other form elements.
```typescript
'use client'
import { CurrencySection } from '@/components/customized/currency';
function InvoiceForm() {
return (
);
}
```
--------------------------------
### Use Currency Rates Hook for Client-Side State Management
Source: https://context7.com/yselimcn/fds-ai/llms.txt
A client-side React hook designed to fetch and manage currency exchange rate data. It provides status updates for loading, success, and error states, along with the fetched data or error details. This hook simplifies integrating real-time rates into React components.
```typescript
'use client'
import { useCurrencyRates } from '@/hooks/use-currency-rates';
import type { CurrencyCode } from '@/lib/currency';
function PriceCalculator() {
const [selectedCurrency, setSelectedCurrency] = useState('USD');
const rateState = useCurrencyRates(selectedCurrency);
if (rateState.status === 'loading') {
return
Loading rates...
;
}
if (rateState.status === 'error') {
return
Error: {rateState.error.message}
;
}
if (rateState.status === 'success') {
const { purchase, sale } = rateState.data;
return (
Purchase Rate: ₺{purchase.toFixed(4)}
Sale Rate: ₺{sale.toFixed(4)}
Convert $100 = ₺{(100 * sale).toFixed(2)}
);
}
return null; // status === 'idle'
}
```
--------------------------------
### React Form Validation with Zod and TypeScript
Source: https://context7.com/yselimcn/fds-ai/llms.txt
Implements type-safe form validation using React Hook Form and Zod schemas. It handles form state, input registration, and submission with built-in validation messages. Dependencies include React Hook Form and Zod.
```typescript
'use client'
import { useZodForm } from '@/hooks/use-zod-form';
import { z } from 'zod';
const LoginSchema = z.object({
email: z.string().min(1, 'E-posta gerekli').email('Geçersiz e-posta'),
password: z.string().min(8, 'Parola en az 8 karakter olmalı'),
rememberMe: z.boolean().default(false),
});
function LoginForm() {
const form = useZodForm(LoginSchema, {
defaultValues: {
email: '',
password: '',
rememberMe: false,
},
// Default validation: onTouched (validates after blur)
// Default reValidation: onChange (re-validates on every keystroke)
});
const onSubmit = (data: z.infer) => {
// data is fully typed: { email: string, password: string, rememberMe: boolean }
console.log('Form data:', data);
};
return (
);
}
```
--------------------------------
### Phone Number Input with Validation
Source: https://context7.com/yselimcn/fds-ai/llms.txt
An international phone number input component that includes a country selector, search functionality, and validation using libphonenumber-js. It integrates with Zod for schema definition and provides features like auto-formatting, visual validation, and internationalized error messages. Written in TypeScript.
```typescript
'use client'
import { useZodForm } from '@/hooks/use-zod-form';
import { PhoneInput, phoneSchema } from '@/components/customized/phone-input';
import { z } from 'zod';
const ContactFormSchema = z.object({
mobilePhone: phoneSchema({ required: true }),
homePhone: phoneSchema({ required: false }),
});
function ContactForm() {
const form = useZodForm(ContactFormSchema, {
defaultValues: {
mobilePhone: '',
homePhone: '',
},
});
const onSubmit = (data: z.infer) => {
console.log('Valid phone:', data.mobilePhone); // E.164 format: "+905551234567"
};
return (
);
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.