Edit Profile

A dialog with form fields for editing profile information. It shows input fields for full name, email, timezone, and working hours. It updates form data as the user types and closes when the user clicks outside or presses close.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/edit-profile

npx layro-cli add @watermeloncorp/edit-profile

npx layro-cli add @watermeloncorp/edit-profile

bunx layro-cli add @watermeloncorp/edit-profile

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { X, Pencil, Clock, ChevronDown } from 'lucide-react';

export interface ProfileData {
    fullName: string;
    email: string;
    timezone: string;
    workingHours: string;
    title: string;
    avatarUrl: string;
    lastUpdated: string;
}