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:
154
components/ui/Layout.js
Normal file
154
components/ui/Layout.js
Normal file
@@ -0,0 +1,154 @@
|
||||
import { useState } from 'react';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
import {
|
||||
HomeIcon,
|
||||
Squares2X2Icon as GridIcon,
|
||||
BoltIcon as LightningBoltIcon,
|
||||
Bars3Icon as MenuIcon,
|
||||
XMarkIcon as XIcon,
|
||||
UserIcon,
|
||||
ArrowRightOnRectangleIcon as LogoutIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
const navigationItems = [
|
||||
{ name: 'Przekrój terenu', href: '/', icon: HomeIcon },
|
||||
{ name: 'Siatka', href: '/cross', icon: GridIcon },
|
||||
{ name: 'Uziomy', href: '/uziomy', icon: LightningBoltIcon },
|
||||
];
|
||||
|
||||
export default function Layout({ children, title = 'Wastpol' }) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const { data: session } = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
<meta name="description" content="Professional electrical engineering tools" />
|
||||
<link rel="icon" href="/icon.png" />
|
||||
</Head>
|
||||
|
||||
{/* Mobile sidebar */}
|
||||
<div className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? 'block' : 'hidden'}`}>
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
|
||||
<div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
|
||||
<div className="flex h-16 items-center justify-between px-4 border-b border-gray-200">
|
||||
<img className="h-8 w-auto" src="/logo.png" alt="Wastpol" />
|
||||
<button
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<XIcon className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<nav className="flex-1 px-2 py-4 space-y-1">
|
||||
{navigationItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = router.pathname === item.href;
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${
|
||||
isActive
|
||||
? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<Icon className="mr-3 h-5 w-5 flex-shrink-0" />
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop layout */}
|
||||
<div className="flex">
|
||||
{/* Desktop sidebar */}
|
||||
<div className="hidden lg:flex lg:flex-shrink-0">
|
||||
<div className="flex w-64 flex-col">
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200 shadow-sm">
|
||||
<div className="flex h-16 items-center justify-center px-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
|
||||
<img className="h-8 w-auto filter brightness-0 invert" src="/logo.png" alt="Wastpol" />
|
||||
<span className="ml-2 text-lg font-semibold text-white">Wastpol</span>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col overflow-y-auto">
|
||||
<nav className="flex-1 px-2 py-4 space-y-1">
|
||||
{navigationItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = router.pathname === item.href;
|
||||
return (
|
||||
<Link key={item.name} href={item.href}>
|
||||
<a
|
||||
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
|
||||
isActive
|
||||
? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500 shadow-sm'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors ${
|
||||
isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-500'
|
||||
}`} />
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex flex-1 flex-col">
|
||||
{/* Top navbar */}
|
||||
<div className="relative z-10 flex h-16 flex-shrink-0 bg-white shadow-sm border-b border-gray-200">
|
||||
<button
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 lg:hidden"
|
||||
>
|
||||
<MenuIcon className="h-6 w-6" />
|
||||
</button>
|
||||
|
||||
<div className="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-1">
|
||||
{/* You can add search or breadcrumbs here */}
|
||||
</div>
|
||||
|
||||
{session && (
|
||||
<div className="ml-4 flex items-center md:ml-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-700">
|
||||
<UserIcon className="h-5 w-5 text-gray-400" />
|
||||
<span className="hidden sm:block">{session.user.email}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => signOut()}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
|
||||
>
|
||||
<LogoutIcon className="h-4 w-4 mr-2" />
|
||||
Wyloguj
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page content */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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