feat: Add Uziomy calculator page with grounding calculations and document generation
- Implemented Uziomy component for calculating grounding parameters. - Added state management for input fields and results. - Integrated DatePicker for date selection. - Created functions for grounding calculations, document generation (DOCX), and DXF file generation. - Enhanced UI with Tailwind CSS for better styling and responsiveness. - Updated global styles to include Inter font and custom scrollbar styles. - Configured Tailwind CSS to extend colors, fonts, and animations.
This commit is contained in:
179
components/ui/components.js
Normal file
179
components/ui/components.js
Normal file
@@ -0,0 +1,179 @@
|
||||
import React from 'react';
|
||||
|
||||
export const Card = ({ children, className = '', ...props }) => (
|
||||
<div
|
||||
className={`bg-white overflow-hidden shadow-sm border border-gray-200 rounded-xl transition-all duration-200 hover:shadow-md ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CardHeader = ({ children, className = '', ...props }) => (
|
||||
<div className={`px-6 py-4 border-b border-gray-200 ${className}`} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CardContent = ({ children, className = '', ...props }) => (
|
||||
<div className={`px-6 py-4 ${className}`} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CardTitle = ({ children, className = '', ...props }) => (
|
||||
<h3 className={`text-lg font-semibold text-gray-900 ${className}`} {...props}>
|
||||
{children}
|
||||
</h3>
|
||||
);
|
||||
|
||||
export const CardDescription = ({ children, className = '', ...props }) => (
|
||||
<p className={`text-sm text-gray-600 mt-1 ${className}`} {...props}>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
|
||||
export const Button = ({
|
||||
children,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
className = '',
|
||||
disabled = false,
|
||||
loading = false,
|
||||
...props
|
||||
}) => {
|
||||
const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm hover:shadow-md',
|
||||
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500 border border-gray-300',
|
||||
outline: 'border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500',
|
||||
ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-gray-500',
|
||||
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: 'px-3 py-2 text-sm',
|
||||
md: 'px-4 py-2 text-sm',
|
||||
lg: 'px-6 py-3 text-base',
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||
disabled={disabled || loading}
|
||||
{...props}
|
||||
>
|
||||
{loading && (
|
||||
<svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
)}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export const Input = ({ label, error, className = '', ...props }) => (
|
||||
<div className="space-y-1">
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<input
|
||||
className={`block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors ${
|
||||
error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''
|
||||
} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Textarea = ({ label, error, className = '', ...props }) => (
|
||||
<div className="space-y-1">
|
||||
{label && (
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
<textarea
|
||||
className={`block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors ${
|
||||
error ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''
|
||||
} ${className}`}
|
||||
{...props}
|
||||
/>
|
||||
{error && (
|
||||
<p className="text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Badge = ({ children, variant = 'default', className = '' }) => {
|
||||
const variants = {
|
||||
default: 'bg-gray-100 text-gray-800',
|
||||
success: 'bg-green-100 text-green-800',
|
||||
warning: 'bg-yellow-100 text-yellow-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
info: 'bg-blue-100 text-blue-800',
|
||||
};
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[variant]} ${className}`}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const Alert = ({ children, variant = 'info', className = '' }) => {
|
||||
const variants = {
|
||||
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
||||
success: 'bg-green-50 border-green-200 text-green-800',
|
||||
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
||||
error: 'bg-red-50 border-red-200 text-red-800',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`border-l-4 p-4 rounded-lg ${variants[variant]} ${className}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Tabs = ({ children, value, onValueChange }) => (
|
||||
<div className="w-full">
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="-mb-px flex space-x-8">
|
||||
{React.Children.map(children, (child, index) =>
|
||||
React.cloneElement(child, {
|
||||
isActive: value === index,
|
||||
onClick: () => onValueChange(index)
|
||||
})
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const TabsTrigger = ({ children, isActive, onClick }) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
isActive
|
||||
? 'border-blue-500 text-blue-600'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
export const TabsContent = ({ children, isActive }) => (
|
||||
<div className={`pt-6 ${isActive ? 'block' : 'hidden'}`}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
Reference in New Issue
Block a user