1caeddc72c
This commit sets up the foundational project structure for PhotumManager. It includes: - Initializing a new React project with Vite. - Configuring essential dependencies such as React, Lucide React, and the Google Generative AI SDK. - Setting up TypeScript and Vite configurations for optimal development. - Defining core application metadata and initial type definitions for users and events. - Establishing basic styling and font configurations in `index.html` with Tailwind CSS. - Adding a `.gitignore` file to manage project dependencies and build artifacts. - Updating the README with instructions for local development.
51 lines
No EOL
1.8 KiB
TypeScript
51 lines
No EOL
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Input: React.FC<InputProps> = ({ label, error, className = '', ...props }) => {
|
|
return (
|
|
<div className="w-full">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
|
|
{label}
|
|
</label>
|
|
<input
|
|
className={`w-full px-4 py-2 border rounded-sm focus:outline-none focus:ring-1 focus:ring-brand-gold focus:border-brand-gold transition-colors
|
|
${error ? 'border-red-500' : 'border-gray-300'}
|
|
${className}`}
|
|
{...props}
|
|
/>
|
|
{error && <span className="text-xs text-red-500 mt-1">{error}</span>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
label: string;
|
|
options: { value: string; label: string }[];
|
|
error?: string;
|
|
}
|
|
|
|
export const Select: React.FC<SelectProps> = ({ label, options, error, className = '', ...props }) => {
|
|
return (
|
|
<div className="w-full">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
|
|
{label}
|
|
</label>
|
|
<select
|
|
className={`w-full px-4 py-2 border rounded-sm focus:outline-none focus:ring-1 focus:ring-brand-gold focus:border-brand-gold transition-colors appearance-none bg-white
|
|
${error ? 'border-red-500' : 'border-gray-300'}
|
|
${className}`}
|
|
{...props}
|
|
>
|
|
<option value="" disabled>Selecione uma opção</option>
|
|
{options.map(opt => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
{error && <span className="text-xs text-red-500 mt-1">{error}</span>}
|
|
</div>
|
|
);
|
|
}; |