[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import './globals.css' import type { Metadata } from 'next' export const metadata: Metadata = { title: 'Form with Save', description: 'A form with save functionality', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="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}', ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'], mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'], }, 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))", }, }, 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", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; html { font-size: 14px; /* Decreased base font size */ } body { @apply font-mono; } h1, h2, h3, h4, h5, h6, label { @apply font-sans; } [V0_FILE]typescriptreact:file="components/form-card.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { motion, AnimatePresence } from "framer-motion" import { Card, CardContent } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" interface FormData { databaseName: string databasePort: string setting: string } interface FormCardProps { index: number layoutId: string onDirty: (isDirty: boolean) => void settingType: "general" | "performance" | "security" onPositionChange: (position: { top: number; bottom: number }) => void } export const FormCard = React.forwardRef( ({ index, layoutId, onDirty, settingType, onPositionChange }, ref) => { const [formData, setFormData] = React.useState(() => ({ databaseName: `Database ${index + 1}`, databasePort: "5432", setting: settingType === "general" ? "UTF8" : settingType === "performance" ? "100" : "md5" })) const [originalData, setOriginalData] = React.useState(formData) const [isDirty, setIsDirty] = React.useState(false) const changes = React.useMemo(() => { return Object.keys(formData).filter(key => formData[key as keyof FormData] !== originalData[key as keyof FormData] ) }, [formData, originalData]) React.useEffect(() => { const newIsDirty = changes.length > 0 if (newIsDirty !== isDirty) { setIsDirty(newIsDirty) onDirty(newIsDirty) } }, [changes, isDirty, onDirty]) const handleChange = React.useCallback((field: keyof FormData, value: string) => { setFormData(prev => ({ ...prev, [field]: value })) }, []) const handleSave = React.useCallback(() => { setOriginalData(formData) }, [formData]) const handleCancel = React.useCallback(() => { setFormData(originalData) }, [originalData]) const getSettingLabel = React.useCallback(() => { switch (settingType) { case "general": return "Default Encoding" case "performance": return "Max Connections" case "security": return "Password Encryption" } }, [settingType]) React.useEffect(() => { if (typeof window === 'undefined') return; const updatePosition = () => { if (ref && 'current' in ref && ref.current) { const rect = ref.current.getBoundingClientRect(); const newTop = rect.top + window.scrollY; const newBottom = rect.bottom + window.scrollY; if ( Math.abs(newTop - lastPosition.current.top) > 1 || Math.abs(newBottom - lastPosition.current.bottom) > 1 ) { lastPosition.current = { top: newTop, bottom: newBottom }; onPositionChange({ top: newTop, bottom: newBottom }); } } }; const lastPosition = { current: { top: 0, bottom: 0 } }; updatePosition(); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(updatePosition); }); if (ref && 'current' in ref && ref.current) { resizeObserver.observe(ref.current); } return () => { if (ref && 'current' in ref && ref.current) { resizeObserver.unobserve(ref.current); } resizeObserver.disconnect(); }; }, [ref, onPositionChange]); return (

{settingType === "general" ? "General Settings" : settingType === "performance" ? "Performance Settings" : "Security Settings"}

PostgreSQL configuration

Database name handleChange("databaseName", e.target.value)} className="bg-[#2C2C2C] border-0 text-white h-12" />

Port handleChange("databasePort", e.target.value)} className="bg-[#2C2C2C] border-0 text-white h-12" />

{getSettingLabel()} handleChange("setting", e.target.value)} className="bg-[#2C2C2C] border-0 text-white h-12" />

{isDirty && (

You have {changes.length} unsaved {changes.length === 1 ? "change" : "changes"}

)} ) } ) FormCard.displayName = "FormCard" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import * as React from "react" import { LayoutGroup, AnimatePresence } from "framer-motion" import { FormCard } from "@/components/form-card" import { FloatingSaveBar } from "@/components/floating-save-bar" function throttle(func: Function, limit: number) { let inThrottle: boolean return function (this: any) { const args = arguments if (!inThrottle) { func.apply(this, args) inThrottle = true setTimeout(() => (inThrottle = false), limit) } } } interface FormState { isDirty: boolean ref: React.RefObject position: { top: number; bottom: number } } interface ScrollState { showFloatingBar: boolean floatingBarPosition: "top" | "bottom" | null } export default function Page() { const [formStates, setFormStates] = React.useState([]) const formRefs = React.useRef[]>([]) const [scrollState, setScrollState] = React.useState({ showFloatingBar: false, floatingBarPosition: null, }) const lastScrolledIndex = React.useRef(-1) // Initialize form states and refs React.useEffect(() => { const initialFormStates = Array(3) .fill(null) .map(() => ({ isDirty: false, ref: React.createRef(), position: { top: 0, bottom: 0 }, })) setFormStates(initialFormStates) formRefs.current = initialFormStates.map((state) => state.ref) }, []) const calculateScrollState = React.useCallback(() => { if (typeof window === "undefined") return const scrollTop = window.scrollY const viewportHeight = window.innerHeight const scrollBottom = scrollTop + viewportHeight let shouldShowFloatingBar = false let newPosition: "top" | "bottom" | null = null for (let i = 0; i < formStates.length; i++) { const state = formStates[i] if (state.isDirty) { const { top, bottom } = state.position if (bottom < scrollTop) { shouldShowFloatingBar = true newPosition = "top" } else if (top > scrollBottom) { shouldShowFloatingBar = true newPosition = "bottom" break } } } setScrollState({ showFloatingBar: shouldShowFloatingBar, floatingBarPosition: newPosition, }) }, [formStates]) React.useEffect(() => { if (typeof window === "undefined") return const handleScrollThrottled = throttle(() => { requestAnimationFrame(calculateScrollState) }, 100) window.addEventListener("scroll", handleScrollThrottled) calculateScrollState() // Initial calculation return () => window.removeEventListener("scroll", handleScrollThrottled) }, [calculateScrollState]) const handleFormDirty = React.useCallback((index: number, isDirty: boolean) => { setFormStates((prevStates) => prevStates.map((state, i) => (i === index ? { ...state, isDirty } : state))) }, []) const handlePositionChange = React.useCallback((index: number, position: { top: number; bottom: number }) => { setFormStates((prevStates) => { const newState = [...prevStates] if ( Math.abs(newState[index].position.top - position.top) > 1 || Math.abs(newState[index].position.bottom - position.bottom) > 1 ) { newState[index] = { ...newState[index], position } return newState } return prevStates }) }, []) const scrollToForm = React.useCallback(() => { if (typeof window === "undefined") return const scrollTop = window.scrollY const viewportHeight = window.innerHeight const scrollBottom = scrollTop + viewportHeight let targetIndex = -1 if (scrollState.floatingBarPosition === "top") { // Scroll to the next dirty form above for (let i = lastScrolledIndex.current - 1; i >= 0; i--) { if (formStates[i].isDirty) { targetIndex = i break } } // If no dirty form found above, start from the bottom if (targetIndex === -1) { for (let i = formStates.length - 1; i > lastScrolledIndex.current; i--) { if (formStates[i].isDirty) { targetIndex = i break } } } } else { // Scroll to the next dirty form below for (let i = lastScrolledIndex.current + 1; i < formStates.length; i++) { if (formStates[i].isDirty) { targetIndex = i break } } // If no dirty form found below, start from the top if (targetIndex === -1) { for (let i = 0; i < lastScrolledIndex.current; i++) { if (formStates[i].isDirty) { targetIndex = i break } } } } if (targetIndex !== -1 && formRefs.current[targetIndex].current) { formRefs.current[targetIndex].current?.scrollIntoView({ behavior: "smooth", block: "start" }) lastScrolledIndex.current = targetIndex } }, [formStates, scrollState.floatingBarPosition]) const totalChanges = formStates.filter((state) => state.isDirty).length return (

{formStates.map((state, index) => ( handleFormDirty(index, isDirty)} onPositionChange={(position) => handlePositionChange(index, position)} settingType={index === 0 ? "general" : index === 1 ? "performance" : "security"} /> ))}

{scrollState.showFloatingBar && ( )}

) } [V0_FILE]typescriptreact:file="components/floating-save-bar.tsx" isEdit="true" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { ArrowUp, ArrowDown } from "lucide-react" interface FloatingSaveBarProps { changesCount: number onClick: () => void position: "top" | "bottom" | null } export function FloatingSaveBar({ changesCount, onClick, position }: FloatingSaveBarProps) { return ( ) }

About

About