459 lines
13 KiB
TypeScript
459 lines
13 KiB
TypeScript
import { SERTIFICATE_PRICE } from '@/shared/lib/metadata';
|
|
import { useTranslations } from 'next-intl';
|
|
import React, { useEffect } from 'react';
|
|
|
|
// ─── FieldWrapper ────────────────────────────────────────────────────────────
|
|
|
|
interface FieldWrapperProps {
|
|
label: string;
|
|
htmlFor?: string;
|
|
error?: string;
|
|
required?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function FieldWrapper({
|
|
label,
|
|
htmlFor,
|
|
error,
|
|
required,
|
|
children,
|
|
}: FieldWrapperProps) {
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label
|
|
htmlFor={htmlFor}
|
|
className="text-sm font-semibold tracking-wide text-stone-700 uppercase"
|
|
>
|
|
{label}
|
|
{required && <span className="ml-1 text-rose-500">*</span>}
|
|
</label>
|
|
{children}
|
|
{error && (
|
|
<p className="flex items-center gap-1.5 text-xs text-rose-600 font-medium">
|
|
<span className="inline-block w-1 h-1 rounded-full bg-rose-500" />
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── TextInput ───────────────────────────────────────────────────────────────
|
|
|
|
interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
hasError?: boolean;
|
|
}
|
|
|
|
export function TextInput({
|
|
hasError,
|
|
className = '',
|
|
...props
|
|
}: TextInputProps) {
|
|
return (
|
|
<input
|
|
className={`
|
|
w-full px-4 py-3 rounded-xl border-2 bg-white
|
|
text-stone-800 placeholder:text-stone-400 text-sm font-medium
|
|
transition-all duration-200 outline-none
|
|
${
|
|
hasError
|
|
? 'border-rose-400 focus:border-rose-500 ring-2 ring-rose-100'
|
|
: 'border-stone-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100'
|
|
}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// ─── ReadonlyField ───────────────────────────────────────────────────────────
|
|
|
|
interface ReadonlyFieldProps {
|
|
value: string;
|
|
icon?: React.ReactNode;
|
|
autoFilledText?: string;
|
|
}
|
|
|
|
export function ReadonlyField({
|
|
value,
|
|
icon,
|
|
autoFilledText = 'Auto-filled',
|
|
}: ReadonlyFieldProps) {
|
|
return (
|
|
<div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-stone-100 border-2 border-stone-200">
|
|
{icon && <span className="text-stone-500 shrink-0">{icon}</span>}
|
|
<span className="text-sm font-semibold text-stone-700">{value}</span>
|
|
<span className="ml-auto text-xs text-stone-400 italic font-medium">
|
|
{autoFilledText}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── FileUploadField ─────────────────────────────────────────────────────────
|
|
|
|
interface FileUploadFieldProps {
|
|
file: File | null;
|
|
onFileChange: (file: File | null) => void;
|
|
hasError?: boolean;
|
|
accept?: string;
|
|
clickToUploadText?: string;
|
|
fileTypesText?: string;
|
|
removeFileAriaLabel?: string;
|
|
}
|
|
|
|
export function FileUploadField({
|
|
file,
|
|
onFileChange,
|
|
hasError,
|
|
accept = '.pdf,.doc,.docx,.txt',
|
|
clickToUploadText = 'Click to upload document',
|
|
fileTypesText = 'PDF, DOC, DOCX, TXT · Max 20 MB',
|
|
removeFileAriaLabel = 'Remove file',
|
|
}: FileUploadFieldProps) {
|
|
const inputRef = React.useRef<HTMLInputElement>(null);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selected = e.target.files?.[0] ?? null;
|
|
onFileChange(selected);
|
|
// Reset so the same file can be re-selected after removal
|
|
e.target.value = '';
|
|
};
|
|
|
|
const handleRemove = () => {
|
|
onFileChange(null);
|
|
};
|
|
|
|
const formatBytes = (bytes: number) => {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<input
|
|
ref={inputRef}
|
|
type="file"
|
|
accept={accept}
|
|
onChange={handleChange}
|
|
className="sr-only"
|
|
id="file-upload"
|
|
/>
|
|
|
|
{!file ? (
|
|
<label
|
|
htmlFor="file-upload"
|
|
className={`
|
|
group flex flex-col items-center justify-center gap-3
|
|
w-full px-6 py-2 rounded-xl border-2 border-dashed
|
|
cursor-pointer transition-all duration-200
|
|
${
|
|
hasError
|
|
? 'border-rose-400 bg-rose-50 hover:bg-rose-50'
|
|
: 'border-stone-300 bg-stone-50 hover:border-blue-500 hover:bg-blue-50'
|
|
}
|
|
`}
|
|
>
|
|
<div
|
|
className={`
|
|
w-12 h-12 rounded-2xl flex items-center justify-center
|
|
transition-colors duration-200
|
|
${hasError ? 'bg-rose-100' : 'bg-white group-hover:bg-blue-100'}
|
|
`}
|
|
>
|
|
<UploadIcon
|
|
className={
|
|
hasError
|
|
? 'text-rose-400'
|
|
: 'text-stone-400 group-hover:text-blue-500'
|
|
}
|
|
/>
|
|
</div>
|
|
<div className="text-center">
|
|
<p
|
|
className={`text-sm font-semibold transition-colors ${hasError ? 'text-rose-600' : 'text-stone-600 group-hover:text-blue-700'}`}
|
|
>
|
|
{clickToUploadText}
|
|
</p>
|
|
<p className="text-xs text-stone-400 mt-0.5">{fileTypesText}</p>
|
|
</div>
|
|
</label>
|
|
) : (
|
|
<div className="flex items-center gap-3 px-4 py-3.5 rounded-xl border-2 border-blue-400 bg-blue-50">
|
|
<div className="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center shrink-0">
|
|
<DocumentIcon className="text-blue-600" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-semibold text-stone-800 truncate">
|
|
{file.name}
|
|
</p>
|
|
<p className="text-xs text-stone-500">{formatBytes(file.size)}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleRemove}
|
|
className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-rose-500 hover:bg-rose-100 transition-colors shrink-0"
|
|
aria-label={removeFileAriaLabel}
|
|
>
|
|
<XIcon />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── CertificateCheckbox ─────────────────────────────────────────────────────
|
|
|
|
interface CertificateCheckboxProps {
|
|
checked: boolean;
|
|
onChange: () => void;
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
export function CertificateCheckbox({
|
|
checked,
|
|
onChange,
|
|
title = 'Return result with certificate',
|
|
description = 'An official certificate will be attached to your originality report.',
|
|
}: CertificateCheckboxProps) {
|
|
const t = useTranslations('PlagiarismCheck');
|
|
return (
|
|
<label
|
|
className={`
|
|
flex items-start gap-3 px-4 py-4 rounded-xl border-2 cursor-pointer
|
|
transition-all duration-200
|
|
${
|
|
checked
|
|
? 'border-blue-400 bg-blue-50'
|
|
: 'border-stone-200 bg-white hover:border-stone-300'
|
|
}
|
|
`}
|
|
>
|
|
<div className="relative mt-0.5 shrink-0">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={onChange}
|
|
className="sr-only"
|
|
/>
|
|
<div
|
|
className={`
|
|
w-5 h-5 rounded-md border-2 flex items-center justify-center
|
|
transition-all duration-150
|
|
${checked ? 'bg-blue-500 border-blue-500' : 'bg-white border-stone-300'}
|
|
`}
|
|
>
|
|
{checked && (
|
|
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
|
|
<path
|
|
d="M2 6l3 3 5-5"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-stone-800">{title}</p>
|
|
<p className="text-sm text-stone-500">
|
|
{t('sertificate_price', { SERTIFICATE_PRICE })}
|
|
</p>
|
|
<p className="text-xs text-stone-500 mt-0.5">{description}</p>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
// ─── SubmitButton ────────────────────────────────────────────────────────────
|
|
|
|
interface SubmitButtonProps {
|
|
isLoading: boolean;
|
|
submittingText?: string;
|
|
submitText?: string;
|
|
}
|
|
|
|
export function SubmitButton({
|
|
isLoading,
|
|
submittingText = 'Submitting…',
|
|
submitText = 'Submit for Originality Check',
|
|
}: SubmitButtonProps) {
|
|
return (
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className={`
|
|
w-full flex items-center justify-center gap-2.5
|
|
px-6 py-4 rounded-xl font-bold text-sm tracking-wide uppercase
|
|
transition-all duration-200
|
|
${
|
|
isLoading
|
|
? 'bg-stone-200 text-stone-400 cursor-not-allowed'
|
|
: 'bg-stone-900 text-white hover:bg-blue-600 active:scale-[0.99] shadow-lg shadow-stone-900/20 hover:shadow-blue-600/30'
|
|
}
|
|
`}
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<SpinnerIcon />
|
|
{submittingText}
|
|
</>
|
|
) : (
|
|
<>
|
|
<ShieldIcon />
|
|
{submitText}
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ─── StatusBanner ────────────────────────────────────────────────────────────
|
|
|
|
interface StatusBannerProps {
|
|
status: 'success' | 'error';
|
|
message: string;
|
|
onDismiss: () => void;
|
|
dismissText?: string;
|
|
}
|
|
|
|
export function StatusBanner({
|
|
status,
|
|
message,
|
|
onDismiss,
|
|
dismissText = 'Dismiss',
|
|
}: StatusBannerProps) {
|
|
const isSuccess = status === 'success';
|
|
useEffect(() => {
|
|
setTimeout(onDismiss, 3000);
|
|
}, []);
|
|
return (
|
|
<div
|
|
className={`
|
|
max-w-md w-full
|
|
flex items-center gap-3 px-4 py-4 rounded-xl border-2 absolute top-6 right-6 z-50
|
|
${isSuccess ? 'bg-emerald-50 border-emerald-400' : 'bg-rose-50 border-rose-400'}
|
|
`}
|
|
>
|
|
<span
|
|
className={`text-lg mt-0.5 ${isSuccess ? 'text-emerald-600' : 'text-rose-600'}`}
|
|
>
|
|
{isSuccess ? '✓' : '✕'}
|
|
</span>
|
|
<p
|
|
className={`flex-1 text-sm font-medium ${isSuccess ? 'text-emerald-800' : 'text-rose-800'}`}
|
|
>
|
|
{message}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className={`text-xs font-bold uppercase ${isSuccess ? 'text-emerald-600 hover:text-emerald-800' : 'text-rose-600 hover:text-rose-800'}`}
|
|
>
|
|
{dismissText}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Inline SVG Icons ────────────────────────────────────────────────────────
|
|
|
|
function UploadIcon({ className = '' }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={`w-6 h-6 ${className}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function DocumentIcon({ className = '' }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
className={`w-5 h-5 ${className}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function XIcon() {
|
|
return (
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function ShieldIcon() {
|
|
return (
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function SpinnerIcon() {
|
|
return (
|
|
<svg className="w-4 h-4 animate-spin" 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 12h4z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|