feat: Initialize frontend with React, Vite, and Tailwind CSS
- Set up main entry point for React application. - Create About, Home, NotFound, Privacy, and Terms pages with SEO support. - Implement API service for file uploads and task management. - Add global styles using Tailwind CSS. - Create utility functions for SEO and text processing. - Configure Vite for development and production builds. - Set up Nginx configuration for serving frontend and backend. - Add scripts for cleanup of expired files and sitemap generation. - Implement deployment script for production environment.
This commit is contained in:
Your Name
53
frontend/src/components/layout/AdSlot.tsx
Normal file
53
frontend/src/components/layout/AdSlot.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
interface AdSlotProps {
|
||||
/** AdSense ad slot ID */
|
||||
slot: string;
|
||||
/** Ad format: 'auto', 'rectangle', 'horizontal', 'vertical' */
|
||||
format?: string;
|
||||
/** Responsive mode */
|
||||
responsive?: boolean;
|
||||
/** Additional CSS class */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Google AdSense ad slot component.
|
||||
* Loads the ad unit once and handles cleanup.
|
||||
*/
|
||||
export default function AdSlot({
|
||||
slot,
|
||||
format = 'auto',
|
||||
responsive = true,
|
||||
className = '',
|
||||
}: AdSlotProps) {
|
||||
const adRef = useRef<HTMLModElement>(null);
|
||||
const isLoaded = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded.current) return;
|
||||
|
||||
try {
|
||||
// Push ad to AdSense queue
|
||||
const adsbygoogle = (window as any).adsbygoogle || [];
|
||||
adsbygoogle.push({});
|
||||
isLoaded.current = true;
|
||||
} catch {
|
||||
// AdSense not loaded (e.g., ad blocker)
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={`ad-slot ${className}`}>
|
||||
<ins
|
||||
ref={adRef}
|
||||
className="adsbygoogle"
|
||||
style={{ display: 'block' }}
|
||||
data-ad-client={import.meta.env.VITE_ADSENSE_CLIENT_ID || ''}
|
||||
data-ad-slot={slot}
|
||||
data-ad-format={format}
|
||||
data-full-width-responsive={responsive ? 'true' : 'false'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
frontend/src/components/layout/Footer.tsx
Normal file
45
frontend/src/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileText } from 'lucide-react';
|
||||
|
||||
export default function Footer() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<footer className="border-t border-slate-200 bg-slate-50">
|
||||
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
||||
{/* Brand */}
|
||||
<div className="flex items-center gap-2 text-slate-600">
|
||||
<FileText className="h-5 w-5" />
|
||||
<span className="text-sm font-medium">
|
||||
© {new Date().getFullYear()} {t('common.appName')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="flex items-center gap-6">
|
||||
<Link
|
||||
to="/privacy"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600"
|
||||
>
|
||||
{t('common.privacy')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/terms"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600"
|
||||
>
|
||||
{t('common.terms')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="text-sm text-slate-500 transition-colors hover:text-primary-600"
|
||||
>
|
||||
{t('common.about')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
50
frontend/src/components/layout/Header.tsx
Normal file
50
frontend/src/components/layout/Header.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FileText, Globe } from 'lucide-react';
|
||||
|
||||
export default function Header() {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = i18n.language === 'ar' ? 'en' : 'ar';
|
||||
i18n.changeLanguage(newLang);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur-lg">
|
||||
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold text-primary-600">
|
||||
<FileText className="h-7 w-7" />
|
||||
<span>{t('common.appName')}</span>
|
||||
</Link>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden items-center gap-6 md:flex">
|
||||
<Link
|
||||
to="/"
|
||||
className="text-sm font-medium text-slate-600 transition-colors hover:text-primary-600"
|
||||
>
|
||||
{t('common.home')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="text-sm font-medium text-slate-600 transition-colors hover:text-primary-600"
|
||||
>
|
||||
{t('common.about')}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Language Toggle */}
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100"
|
||||
aria-label={t('common.language')}
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
<span>{i18n.language === 'ar' ? 'English' : 'العربية'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
88
frontend/src/components/shared/DownloadButton.tsx
Normal file
88
frontend/src/components/shared/DownloadButton.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Download, RotateCcw, Clock } from 'lucide-react';
|
||||
import type { TaskResult } from '@/services/api';
|
||||
import { formatFileSize } from '@/utils/textTools';
|
||||
|
||||
interface DownloadButtonProps {
|
||||
/** Task result containing download URL */
|
||||
result: TaskResult;
|
||||
/** Called when user wants to start over */
|
||||
onStartOver: () => void;
|
||||
}
|
||||
|
||||
export default function DownloadButton({ result, onStartOver }: DownloadButtonProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!result.download_url) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl bg-emerald-50 p-6 ring-1 ring-emerald-200">
|
||||
{/* Success header */}
|
||||
<div className="mb-4 text-center">
|
||||
<p className="text-lg font-semibold text-emerald-800">
|
||||
{t('result.conversionComplete')}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-emerald-600">
|
||||
{t('result.downloadReady')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* File stats */}
|
||||
{(result.original_size || result.compressed_size) && (
|
||||
<div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{result.original_size && (
|
||||
<div className="rounded-lg bg-white p-3 text-center">
|
||||
<p className="text-xs text-slate-500">{t('result.originalSize')}</p>
|
||||
<p className="text-sm font-semibold text-slate-900">
|
||||
{formatFileSize(result.original_size)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{result.compressed_size && (
|
||||
<div className="rounded-lg bg-white p-3 text-center">
|
||||
<p className="text-xs text-slate-500">{t('result.newSize')}</p>
|
||||
<p className="text-sm font-semibold text-slate-900">
|
||||
{formatFileSize(result.compressed_size)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{result.reduction_percent !== undefined && (
|
||||
<div className="rounded-lg bg-white p-3 text-center">
|
||||
<p className="text-xs text-slate-500">{t('result.reduction')}</p>
|
||||
<p className="text-sm font-semibold text-emerald-600">
|
||||
{result.reduction_percent}%
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Download button */}
|
||||
<a
|
||||
href={result.download_url}
|
||||
download={result.filename}
|
||||
className="btn-success w-full"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Download className="h-5 w-5" />
|
||||
{t('common.download')} — {result.filename}
|
||||
</a>
|
||||
|
||||
{/* Expiry notice */}
|
||||
<div className="mt-3 flex items-center justify-center gap-1.5 text-xs text-slate-500">
|
||||
<Clock className="h-3.5 w-3.5" />
|
||||
{t('result.linkExpiry')}
|
||||
</div>
|
||||
|
||||
{/* Start over */}
|
||||
<button
|
||||
onClick={onStartOver}
|
||||
className="mt-4 flex w-full items-center justify-center gap-2 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700"
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
132
frontend/src/components/shared/FileUploader.tsx
Normal file
132
frontend/src/components/shared/FileUploader.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useDropzone, type Accept } from 'react-dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Upload, File, X } from 'lucide-react';
|
||||
import { formatFileSize } from '@/utils/textTools';
|
||||
|
||||
interface FileUploaderProps {
|
||||
/** Called when a file is selected/dropped */
|
||||
onFileSelect: (file: File) => void;
|
||||
/** Currently selected file */
|
||||
file: File | null;
|
||||
/** Accepted MIME types */
|
||||
accept?: Accept;
|
||||
/** Maximum file size in MB */
|
||||
maxSizeMB?: number;
|
||||
/** Whether upload is in progress */
|
||||
isUploading?: boolean;
|
||||
/** Upload progress percentage */
|
||||
uploadProgress?: number;
|
||||
/** Error message */
|
||||
error?: string | null;
|
||||
/** Reset handler */
|
||||
onReset?: () => void;
|
||||
/** Descriptive text for accepted file types */
|
||||
acceptLabel?: string;
|
||||
}
|
||||
|
||||
export default function FileUploader({
|
||||
onFileSelect,
|
||||
file,
|
||||
accept,
|
||||
maxSizeMB = 20,
|
||||
isUploading = false,
|
||||
uploadProgress = 0,
|
||||
error,
|
||||
onReset,
|
||||
acceptLabel,
|
||||
}: FileUploaderProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onDrop = useCallback(
|
||||
(acceptedFiles: File[]) => {
|
||||
if (acceptedFiles.length > 0) {
|
||||
onFileSelect(acceptedFiles[0]);
|
||||
}
|
||||
},
|
||||
[onFileSelect]
|
||||
);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop,
|
||||
accept,
|
||||
maxFiles: 1,
|
||||
maxSize: maxSizeMB * 1024 * 1024,
|
||||
disabled: isUploading,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Drop Zone */}
|
||||
{!file && (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`upload-zone ${isDragActive ? 'drag-active' : ''}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<Upload
|
||||
className={`mb-4 h-12 w-12 ${
|
||||
isDragActive ? 'text-primary-500' : 'text-slate-400'
|
||||
}`}
|
||||
/>
|
||||
<p className="mb-2 text-base font-medium text-slate-700">
|
||||
{t('common.dragDrop')}
|
||||
</p>
|
||||
{acceptLabel && (
|
||||
<p className="text-sm text-slate-500">{acceptLabel}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-slate-400">
|
||||
{t('common.maxSize', { size: maxSizeMB })}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Selected File */}
|
||||
{file && !isUploading && (
|
||||
<div className="flex items-center gap-3 rounded-xl bg-primary-50 p-4 ring-1 ring-primary-200">
|
||||
<File className="h-8 w-8 flex-shrink-0 text-primary-600" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-slate-900">
|
||||
{file.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{formatFileSize(file.size)}</p>
|
||||
</div>
|
||||
{onReset && (
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-200 hover:text-slate-600"
|
||||
aria-label="Remove file"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Progress */}
|
||||
{isUploading && (
|
||||
<div className="rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-slate-700">
|
||||
{t('common.upload')}...
|
||||
</span>
|
||||
<span className="text-sm text-slate-500">{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-slate-200">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary-600 transition-all duration-300"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
frontend/src/components/shared/ProgressBar.tsx
Normal file
42
frontend/src/components/shared/ProgressBar.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Loader2, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
interface ProgressBarProps {
|
||||
/** Current task state */
|
||||
state: 'PENDING' | 'PROCESSING' | 'SUCCESS' | 'FAILURE' | string;
|
||||
/** Progress message */
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export default function ProgressBar({ state, message }: ProgressBarProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isActive = state === 'PENDING' || state === 'PROCESSING';
|
||||
const isComplete = state === 'SUCCESS';
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-slate-50 p-5 ring-1 ring-slate-200">
|
||||
<div className="flex items-center gap-3">
|
||||
{isActive && (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-primary-600" />
|
||||
)}
|
||||
{isComplete && (
|
||||
<CheckCircle2 className="h-6 w-6 text-emerald-600" />
|
||||
)}
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-slate-700">
|
||||
{message || t('common.processing')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Animated progress bar for active states */}
|
||||
{isActive && (
|
||||
<div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
|
||||
<div className="progress-bar-animated h-full w-2/3 rounded-full bg-primary-500 transition-all" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
frontend/src/components/shared/ToolCard.tsx
Normal file
43
frontend/src/components/shared/ToolCard.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
interface ToolCardProps {
|
||||
/** Tool route path */
|
||||
to: string;
|
||||
/** Tool title */
|
||||
title: string;
|
||||
/** Short description */
|
||||
description: string;
|
||||
/** Pre-rendered icon element */
|
||||
icon: ReactNode;
|
||||
/** Icon background color class */
|
||||
bgColor: string;
|
||||
}
|
||||
|
||||
export default function ToolCard({
|
||||
to,
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
bgColor,
|
||||
}: ToolCardProps) {
|
||||
return (
|
||||
<Link to={to} className="tool-card group block">
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl ${bgColor}`}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-semibold text-slate-900 group-hover:text-primary-600 transition-colors">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-slate-500 line-clamp-2">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
176
frontend/src/components/tools/ImageConverter.tsx
Normal file
176
frontend/src/components/tools/ImageConverter.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { ImageIcon } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
type OutputFormat = 'jpg' | 'png' | 'webp';
|
||||
|
||||
export default function ImageConverter() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [format, setFormat] = useState<OutputFormat>('jpg');
|
||||
const [quality, setQuality] = useState(85);
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/image/convert',
|
||||
maxSizeMB: 10,
|
||||
acceptedTypes: ['png', 'jpg', 'jpeg', 'webp'],
|
||||
extraData: { format, quality: quality.toString() },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const formats: { value: OutputFormat; label: string }[] = [
|
||||
{ value: 'jpg', label: 'JPG' },
|
||||
{ value: 'png', label: 'PNG' },
|
||||
{ value: 'webp', label: 'WebP' },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.imageConvert.title'),
|
||||
description: t('tools.imageConvert.description'),
|
||||
url: `${window.location.origin}/tools/image-converter`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.imageConvert.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.imageConvert.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/image-converter`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-purple-100">
|
||||
<ImageIcon className="h-8 w-8 text-purple-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.imageConvert.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.imageConvert.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{
|
||||
'image/png': ['.png'],
|
||||
'image/jpeg': ['.jpg', '.jpeg'],
|
||||
'image/webp': ['.webp'],
|
||||
}}
|
||||
maxSizeMB={10}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="Images (PNG, JPG, WebP)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Format Selector */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700">
|
||||
Convert to:
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{formats.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
onClick={() => setFormat(f.value)}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
format === f.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quality Slider (for lossy formats) */}
|
||||
{format !== 'png' && (
|
||||
<div>
|
||||
<label className="mb-2 flex items-center justify-between text-sm font-medium text-slate-700">
|
||||
<span>Quality</span>
|
||||
<span className="text-primary-600">{quality}%</span>
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="10"
|
||||
max="100"
|
||||
value={quality}
|
||||
onChange={(e) => setQuality(Number(e.target.value))}
|
||||
className="w-full accent-primary-600"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.imageConvert.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
148
frontend/src/components/tools/PdfCompressor.tsx
Normal file
148
frontend/src/components/tools/PdfCompressor.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Minimize2 } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
type Quality = 'low' | 'medium' | 'high';
|
||||
|
||||
export default function PdfCompressor() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [quality, setQuality] = useState<Quality>('medium');
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/compress/pdf',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { quality },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const qualityOptions: { value: Quality; label: string; desc: string }[] = [
|
||||
{ value: 'low', label: t('tools.compressPdf.qualityLow'), desc: '72 DPI' },
|
||||
{ value: 'medium', label: t('tools.compressPdf.qualityMedium'), desc: '150 DPI' },
|
||||
{ value: 'high', label: t('tools.compressPdf.qualityHigh'), desc: '300 DPI' },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.compressPdf.title'),
|
||||
description: t('tools.compressPdf.description'),
|
||||
url: `${window.location.origin}/tools/compress-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.compressPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.compressPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/compress-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-orange-100">
|
||||
<Minimize2 className="h-8 w-8 text-orange-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.compressPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.compressPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
|
||||
{/* Quality Selector */}
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{qualityOptions.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => setQuality(opt.value)}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
quality === opt.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50'
|
||||
}`}
|
||||
>
|
||||
<p className="text-sm font-medium">{opt.label}</p>
|
||||
<p className="text-xs text-slate-400 mt-0.5">{opt.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.compressPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
128
frontend/src/components/tools/PdfToWord.tsx
Normal file
128
frontend/src/components/tools/PdfToWord.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { FileText } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function PdfToWord() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/convert/pdf-to-word',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.pdfToWord.title'),
|
||||
description: t('tools.pdfToWord.description'),
|
||||
url: `${window.location.origin}/tools/pdf-to-word`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.pdfToWord.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.pdfToWord.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/pdf-to-word`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
{/* Tool Header */}
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100">
|
||||
<FileText className="h-8 w-8 text-red-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.pdfToWord.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.pdfToWord.description')}</p>
|
||||
</div>
|
||||
|
||||
{/* Ad Slot - Top */}
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{/* Upload Phase */}
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.pdfToWord.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Processing Phase */}
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar
|
||||
state={status?.state || 'PENDING'}
|
||||
message={status?.progress}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Done Phase */}
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{(phase === 'done' && taskError) && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Ad Slot - Bottom */}
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
146
frontend/src/components/tools/TextCleaner.tsx
Normal file
146
frontend/src/components/tools/TextCleaner.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Eraser, Copy, Check } from 'lucide-react';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { removeExtraSpaces, convertCase, removeDiacritics } from '@/utils/textTools';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function TextCleaner() {
|
||||
const { t } = useTranslation();
|
||||
const [input, setInput] = useState('');
|
||||
const [output, setOutput] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const applyTransform = (type: string) => {
|
||||
let result = input;
|
||||
switch (type) {
|
||||
case 'removeSpaces':
|
||||
result = removeExtraSpaces(input);
|
||||
break;
|
||||
case 'upper':
|
||||
result = convertCase(input, 'upper');
|
||||
break;
|
||||
case 'lower':
|
||||
result = convertCase(input, 'lower');
|
||||
break;
|
||||
case 'title':
|
||||
result = convertCase(input, 'title');
|
||||
break;
|
||||
case 'sentence':
|
||||
result = convertCase(input, 'sentence');
|
||||
break;
|
||||
case 'removeDiacritics':
|
||||
result = removeDiacritics(input);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setOutput(result);
|
||||
setCopied(false);
|
||||
};
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(output || input);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
// Clipboard API not available
|
||||
}
|
||||
};
|
||||
|
||||
const buttons = [
|
||||
{ key: 'removeSpaces', label: t('tools.textCleaner.removeSpaces'), color: 'bg-blue-600 hover:bg-blue-700' },
|
||||
{ key: 'upper', label: t('tools.textCleaner.toUpperCase'), color: 'bg-purple-600 hover:bg-purple-700' },
|
||||
{ key: 'lower', label: t('tools.textCleaner.toLowerCase'), color: 'bg-emerald-600 hover:bg-emerald-700' },
|
||||
{ key: 'title', label: t('tools.textCleaner.toTitleCase'), color: 'bg-orange-600 hover:bg-orange-700' },
|
||||
{ key: 'sentence', label: t('tools.textCleaner.toSentenceCase'), color: 'bg-rose-600 hover:bg-rose-700' },
|
||||
{ key: 'removeDiacritics', label: t('tools.textCleaner.removeDiacritics'), color: 'bg-amber-600 hover:bg-amber-700' },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.textCleaner.title'),
|
||||
description: t('tools.textCleaner.description'),
|
||||
url: `${window.location.origin}/tools/text-cleaner`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.textCleaner.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.textCleaner.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/text-cleaner`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-indigo-100">
|
||||
<Eraser className="h-8 w-8 text-indigo-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.textCleaner.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.textCleaner.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{/* Input */}
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={(e) => {
|
||||
setInput(e.target.value);
|
||||
setCopied(false);
|
||||
}}
|
||||
placeholder={t('tools.wordCounter.placeholder')}
|
||||
className="input-field mb-4 min-h-[150px] resize-y text-sm"
|
||||
dir="auto"
|
||||
/>
|
||||
|
||||
{/* Transform Buttons */}
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
{buttons.map((btn) => (
|
||||
<button
|
||||
key={btn.key}
|
||||
onClick={() => applyTransform(btn.key)}
|
||||
disabled={!input.trim()}
|
||||
className={`rounded-lg px-4 py-2 text-xs font-medium text-white transition-colors disabled:opacity-40 ${btn.color}`}
|
||||
>
|
||||
{btn.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Output */}
|
||||
{output && (
|
||||
<div className="relative">
|
||||
<textarea
|
||||
value={output}
|
||||
readOnly
|
||||
className="input-field min-h-[150px] resize-y bg-emerald-50 text-sm"
|
||||
dir="auto"
|
||||
/>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="absolute right-3 top-3 flex items-center gap-1 rounded-lg bg-white px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm ring-1 ring-slate-200 transition-colors hover:bg-slate-50"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-3.5 w-3.5 text-emerald-600" />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
{t('tools.textCleaner.copyResult')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
192
frontend/src/components/tools/VideoToGif.tsx
Normal file
192
frontend/src/components/tools/VideoToGif.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Film } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function VideoToGif() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [startTime, setStartTime] = useState(0);
|
||||
const [duration, setDuration] = useState(5);
|
||||
const [fps, setFps] = useState(10);
|
||||
const [width, setWidth] = useState(480);
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/video/to-gif',
|
||||
maxSizeMB: 50,
|
||||
acceptedTypes: ['mp4', 'webm'],
|
||||
extraData: {
|
||||
start_time: startTime.toString(),
|
||||
duration: duration.toString(),
|
||||
fps: fps.toString(),
|
||||
width: width.toString(),
|
||||
},
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.videoToGif.title'),
|
||||
description: t('tools.videoToGif.description'),
|
||||
url: `${window.location.origin}/tools/video-to-gif`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.videoToGif.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.videoToGif.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/video-to-gif`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-100">
|
||||
<Film className="h-8 w-8 text-emerald-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.videoToGif.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.videoToGif.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{
|
||||
'video/mp4': ['.mp4'],
|
||||
'video/webm': ['.webm'],
|
||||
}}
|
||||
maxSizeMB={50}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="Video (MP4, WebM) — max 50MB"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* GIF Options */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.videoToGif.startTime')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.5"
|
||||
value={startTime}
|
||||
onChange={(e) => setStartTime(Number(e.target.value))}
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.videoToGif.duration')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0.5"
|
||||
max="15"
|
||||
step="0.5"
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(Number(e.target.value))}
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.videoToGif.fps')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="20"
|
||||
value={fps}
|
||||
onChange={(e) => setFps(Number(e.target.value))}
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1 block text-sm font-medium text-slate-700">
|
||||
{t('tools.videoToGif.width')}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="100"
|
||||
max="640"
|
||||
step="10"
|
||||
value={width}
|
||||
onChange={(e) => setWidth(Number(e.target.value))}
|
||||
className="input-field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.videoToGif.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
81
frontend/src/components/tools/WordCounter.tsx
Normal file
81
frontend/src/components/tools/WordCounter.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Hash } from 'lucide-react';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { countText, type TextStats } from '@/utils/textTools';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function WordCounter() {
|
||||
const { t } = useTranslation();
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const stats: TextStats = countText(text);
|
||||
|
||||
const statItems = [
|
||||
{ label: t('tools.wordCounter.words'), value: stats.words, color: 'bg-blue-50 text-blue-700' },
|
||||
{ label: t('tools.wordCounter.characters'), value: stats.characters, color: 'bg-purple-50 text-purple-700' },
|
||||
{ label: t('tools.wordCounter.sentences'), value: stats.sentences, color: 'bg-emerald-50 text-emerald-700' },
|
||||
{ label: t('tools.wordCounter.paragraphs'), value: stats.paragraphs, color: 'bg-orange-50 text-orange-700' },
|
||||
];
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.wordCounter.title'),
|
||||
description: t('tools.wordCounter.description'),
|
||||
url: `${window.location.origin}/tools/word-counter`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.wordCounter.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.wordCounter.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/word-counter`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-100">
|
||||
<Hash className="h-8 w-8 text-blue-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.wordCounter.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.wordCounter.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
{statItems.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className={`rounded-xl p-4 text-center ${item.color}`}
|
||||
>
|
||||
<p className="text-2xl font-bold">{item.value}</p>
|
||||
<p className="text-xs font-medium opacity-80">{item.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Reading Time */}
|
||||
{stats.words > 0 && (
|
||||
<p className="mb-4 text-center text-sm text-slate-500">
|
||||
📖 Reading time: {stats.readingTime}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Text Input */}
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
placeholder={t('tools.wordCounter.placeholder')}
|
||||
className="input-field min-h-[300px] resize-y font-mono text-sm"
|
||||
dir="auto"
|
||||
/>
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
121
frontend/src/components/tools/WordToPdf.tsx
Normal file
121
frontend/src/components/tools/WordToPdf.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { FileOutput } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
|
||||
export default function WordToPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
|
||||
const {
|
||||
file,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
taskId,
|
||||
error: uploadError,
|
||||
selectFile,
|
||||
startUpload,
|
||||
reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/convert/word-to-pdf',
|
||||
maxSizeMB: 15,
|
||||
acceptedTypes: ['doc', 'docx'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.wordToPdf.title'),
|
||||
description: t('tools.wordToPdf.description'),
|
||||
url: `${window.location.origin}/tools/word-to-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.wordToPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.wordToPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/word-to-pdf`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-100">
|
||||
<FileOutput className="h-8 w-8 text-blue-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.wordToPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.wordToPdf.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{
|
||||
'application/msword': ['.doc'],
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
|
||||
}}
|
||||
maxSizeMB={15}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="Word (.doc, .docx)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.wordToPdf.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
|
||||
<p className="text-sm text-red-700">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.startOver')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user