livechat-widget
Version:
LiveChat Widget for Next.js applications
37 lines (36 loc) • 3.61 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import Image from 'next/image';
var DEFAULT_PROFILE_IMAGE = '/image/profile.png';
var UserProfileForm = function (_a) {
var onSubmit = _a.onSubmit, _b = _a.theme, theme = _b === void 0 ? 'light' : _b, bgColor = _a.bgColor, textColor = _a.textColor;
var _c = useState(''), username = _c[0], setUsername = _c[1];
var _d = useState(DEFAULT_PROFILE_IMAGE), profileImage = _d[0], setProfileImage = _d[1];
var _e = useState(''), error = _e[0], setError = _e[1];
var handleSubmit = function (e) {
e.preventDefault();
if (!username.trim()) {
setError('Please enter your name');
return;
}
onSubmit({
username: username.trim(),
profile_image: profileImage
});
};
var isDark = theme === 'dark';
var bgClass = isDark ? 'bg-gray-900' : 'bg-white';
var textClass = isDark ? 'text-white' : 'text-gray-800';
var borderClass = isDark ? 'border-gray-700' : 'border-gray-200';
var inputBgClass = isDark ? 'bg-gray-800 border-gray-700' : 'bg-gray-100 border-transparent';
var inputTextClass = isDark ? 'text-white' : 'text-gray-800';
return (_jsxs("div", { className: "w-full max-w-md p-6 rounded-lg shadow-md border ".concat(bgColor ? '' : "".concat(bgClass, " ").concat(borderClass), " ").concat(textColor ? '' : textClass), style: {
backgroundColor: bgColor || '',
color: textColor || ''
}, children: [_jsx("h2", { className: "text-xl font-semibold mb-6 text-center", children: "Enter Your Information" }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx("div", { className: "mb-6 flex justify-center", children: _jsx("div", { className: "relative w-24 h-24 rounded-full overflow-hidden border-2 border-blue-500", children: _jsx(Image, { src: profileImage, alt: "Profile", fill: true, className: "object-cover" }) }) }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { htmlFor: "username", className: "block text-sm font-medium mb-1", children: "Your Name" }), _jsx("input", { type: "text", id: "username", value: username, onChange: function (e) {
setUsername(e.target.value);
setError('');
}, placeholder: "Enter your name", className: "w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ".concat(inputBgClass, " ").concat(inputTextClass) }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error })] }), _jsxs("div", { className: "mb-6", children: [_jsx("label", { htmlFor: "profileImage", className: "block text-sm font-medium mb-1", children: "Profile Image URL (Optional)" }), _jsx("input", { type: "text", id: "profileImage", value: profileImage === DEFAULT_PROFILE_IMAGE ? '' : profileImage, onChange: function (e) { return setProfileImage(e.target.value || DEFAULT_PROFILE_IMAGE); }, placeholder: "https://example.com/your-image.jpg", className: "w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ".concat(inputBgClass, " ").concat(inputTextClass) }), _jsx("p", { className: "mt-1 text-xs opacity-70", children: "Leave empty to use default avatar" })] }), _jsx("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-500 text-white font-medium rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", children: "Join Chat" })] })] }));
};
export default UserProfileForm;