[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/.{ts,tsx}", ".{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, apple: { blue: "#0a84ff", green: "#32d74b", orange: "#ff9f0a", red: "#ff453a", gray: { 100: "#8e8e93", 200: "#636366", 300: "#48484a", 400: "#3a3a3c", 500: "#2c2c2e", 600: "#1c1c1e", }, }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite", }, backdropBlur: { xs: "2px", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } /* Стилизация скроллбара / ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #1c1c1e; } ::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #4a4a4c; } / Стилизация автозаполнения инпутов / input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #2c2c2e inset !important; -webkit-text-fill-color: white !important; transition: background-color 5000s ease-in-out 0s; } / Убираем стрелки у input type="number" / input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin", "cyrillic"] }) export const metadata: Metadata = { title: "Расчет зарплаты | Калькулятор чистого заработка", description: "Калькулятор для расчета чистого заработка с учетом процентных отчислений и конвертацией в гривны", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "salary-calculator", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "framer-motion": "^10.16.4", "lucide-react": "^0.294.0", "next": "14.0.3", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/actions.ts" isEdit="true" isQuickEdit="true" "use server" // Функция для получения курса валют от НБУ export async function getExchangeRate() { try { // Получаем текущую дату в формате YYYYMMDD для API НБУ const today = new Date() const year = today.getFullYear() const month = String(today.getMonth() + 1).padStart(2, "0") const day = String(today.getDate()).padStart(2, "0") const dateString = `${year}${month}${day}` // Запрос к API НБУ для получения курса EUR с явным указанием сегодняшней даты const response = await fetch( `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?valcode=EUR&date=${dateString}&json`, { next: { revalidate: 1800 } }, // Кешировать данные на 30 минут вместо часа ) if (!response.ok) { throw new Error(`Ошибка API: ${response.status}`) } const data = await response.json() if (!data || data.length === 0) { throw new Error("Данные о курсе EUR не найдены") } // Возвращаем курс и временную метку return { rate: data[0].rate, timestamp: new Date().toISOString(), } } catch (error) { console.error("Ошибка при получении курса валют:", error) throw new Error("Не удалось получить курс валют") } } [V0_FILE]typescriptreact:file="components/salary-calculator.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { motion, AnimatePresence } from "framer-motion" import { RefreshCw, ArrowDown, Euro, Wallet } from "lucide-react" import { getExchangeRate } from "@/app/actions" export default function SalaryCalculator() { const [totalBalance, setTotalBalance] = useState("") const [exchangeRate, setExchangeRate] = useState(null) const [netSalaryUAH, setNetSalaryUAH] = useState(null) const [netSalaryEUR, setNetSalaryEUR] = useState(null) const [percentage, setPercentage] = useState(null) const [loading, setLoading] = useState(true) const [lastUpdated, setLastUpdated] = useState("") const [error, setError] = useState(null) const [isCalculated, setIsCalculated] = useState(false) const fetchExchangeRate = useCallback(async () => { setLoading(true) setError(null) try { const { rate, timestamp } = await getExchangeRate() setExchangeRate(rate) setLastUpdated(new Date(timestamp).toLocaleString("ru-RU")) setLoading(false) } catch (err) { setError("Не удалось получить курс валют") setLoading(false) } }, []) useEffect(() => { fetchExchangeRate() }, [fetchExchangeRate]) const calculateSalary = () => { if (!totalBalance || !exchangeRate) return const balanceInEUR = Number.parseFloat(totalBalance) if (isNaN(balanceInEUR)) { return } const taxPercentage = balanceInEUR <= 500 ? 35 : balanceInEUR <= 1000 ? 38 : balanceInEUR <= 1500 ? 40 : balanceInEUR <= 1999 ? 45 : 50 setPercentage(taxPercentage) const netEUR = balanceInEUR (1 - taxPercentage / 100) const netUAH = netEUR * exchangeRate setNetSalaryEUR(netEUR) setNetSalaryUAH(netUAH) setIsCalculated(true) } return (

{error ? ( {error} ) : loading ? ( Загрузка курса валют... ) : ( <>

Курс НБУ: {exchangeRate?.toFixed(2)} ₴ = 1 € {lastUpdated && (
Актуальный
)}
Обновить
{lastUpdated && (
Обновлено: {lastUpdated} ●
)}

Обновлено: {lastUpdated}
)}
Общий заработок (€) setTotalBalance(e.target.value)} className="w-full px-4 py-3 bg-[#2c2c2e] border border-[#3a3a3c] rounded-xl text-white placeholder-[#6c6c6e] focus:outline-none focus:ring-2 focus:ring-[#0a84ff] focus:border-transparent transition-all" />
Рассчитать {isCalculated && netSalaryUAH !== null && netSalaryEUR !== null && percentage !== null && (

Процент отчислений: {percentage}%

Чистыми в евро: {netSalaryEUR.toFixed(2)}

Чистыми в гривнах: {netSalaryUAH.toFixed(2)} ₴

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ArrowRight, RefreshCw } from "lucide-react" import SalaryCalculator from "@/components/salary-calculator" export default function Home() { const [loading, setLoading] = useState(true) useEffect(() => { // Simulate loading for the animation const timer = setTimeout(() => { setLoading(false) }, 1500) return () => clearTimeout(timer) }, []) return (
{loading ? ( Загрузка актуального курса НБУ... ) : (
Расчет чистого заработка
)}
) }