242 lines
10 KiB
TypeScript
242 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from 'react';
|
|
|
|
interface LinkData {
|
|
name: string;
|
|
originalUrl: string;
|
|
customSlug: string;
|
|
expiresAt: string;
|
|
tags: string[];
|
|
}
|
|
|
|
interface CreateLinkModalProps {
|
|
onClose: () => void;
|
|
onSubmit: (linkData: LinkData) => void;
|
|
}
|
|
|
|
export default function CreateLinkModal({ onClose, onSubmit }: CreateLinkModalProps) {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
originalUrl: '',
|
|
customSlug: '',
|
|
expiresAt: '',
|
|
tags: [] as string[],
|
|
tagInput: ''
|
|
});
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}));
|
|
};
|
|
|
|
const handleTagKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter' && formData.tagInput.trim()) {
|
|
e.preventDefault();
|
|
addTag();
|
|
}
|
|
};
|
|
|
|
const addTag = () => {
|
|
if (formData.tagInput.trim() && !formData.tags.includes(formData.tagInput.trim())) {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
tags: [...prev.tags, prev.tagInput.trim()],
|
|
tagInput: ''
|
|
}));
|
|
}
|
|
};
|
|
|
|
const removeTag = (tagToRemove: string) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
tags: prev.tags.filter(tag => tag !== tagToRemove)
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const { tagInput, ...submitData } = formData;
|
|
onSubmit(submitData as LinkData);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-10 overflow-y-auto bg-background/80 backdrop-blur-sm">
|
|
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div className="inline-block w-full max-w-xl overflow-hidden text-left align-middle transition-all transform bg-card-bg rounded-xl shadow-xl">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between p-4 border-b border-card-border">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="p-2 bg-accent-blue/20 rounded-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-accent-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-xl font-medium leading-6 text-foreground">
|
|
Create New Link
|
|
</h3>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="text-text-secondary rounded-md hover:text-foreground focus:outline-none"
|
|
>
|
|
<span className="sr-only">Close</span>
|
|
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6 overflow-y-auto max-h-[70vh]">
|
|
{/* Link Name */}
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-foreground">
|
|
Link Name <span className="text-accent-red">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="e.g. Product Launch Campaign"
|
|
className="block w-full px-3 py-2 mt-1 text-foreground bg-card-bg border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Original URL */}
|
|
<div>
|
|
<label htmlFor="originalUrl" className="block text-sm font-medium text-foreground">
|
|
Original URL <span className="text-accent-red">*</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="originalUrl"
|
|
name="originalUrl"
|
|
value={formData.originalUrl}
|
|
onChange={handleChange}
|
|
placeholder="https://example.com/your-long-url"
|
|
className="block w-full px-3 py-2 mt-1 text-foreground bg-card-bg border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* Custom Slug */}
|
|
<div>
|
|
<label htmlFor="customSlug" className="block text-sm font-medium text-foreground">
|
|
Custom Slug <span className="text-text-secondary">(Optional)</span>
|
|
</label>
|
|
<div className="flex mt-1 rounded-md shadow-sm">
|
|
<span className="inline-flex items-center px-3 py-2 text-sm text-text-secondary border border-r-0 border-card-border rounded-l-md bg-card-bg/60">
|
|
short.io/
|
|
</span>
|
|
<input
|
|
type="text"
|
|
id="customSlug"
|
|
name="customSlug"
|
|
value={formData.customSlug}
|
|
onChange={handleChange}
|
|
placeholder="custom-slug"
|
|
className="flex-1 block w-full min-w-0 px-3 py-2 text-foreground bg-card-bg border border-card-border rounded-none rounded-r-md focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
|
|
/>
|
|
</div>
|
|
<p className="mt-1 text-xs text-text-secondary">
|
|
Leave blank to generate a random slug
|
|
</p>
|
|
</div>
|
|
|
|
{/* Expiration Date */}
|
|
<div>
|
|
<label htmlFor="expiresAt" className="block text-sm font-medium text-foreground">
|
|
Expiration Date <span className="text-text-secondary">(Optional)</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="expiresAt"
|
|
name="expiresAt"
|
|
value={formData.expiresAt}
|
|
onChange={handleChange}
|
|
className="block w-full px-3 py-2 mt-1 text-foreground bg-card-bg border border-card-border rounded-md shadow-sm focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
|
|
/>
|
|
<p className="mt-1 text-xs text-text-secondary">
|
|
Leave blank for a non-expiring link
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
<div>
|
|
<label htmlFor="tagInput" className="block text-sm font-medium text-foreground">
|
|
Tags <span className="text-text-secondary">(Optional)</span>
|
|
</label>
|
|
<div className="flex mt-1 rounded-md shadow-sm">
|
|
<input
|
|
type="text"
|
|
id="tagInput"
|
|
name="tagInput"
|
|
value={formData.tagInput}
|
|
onChange={handleChange}
|
|
onKeyDown={handleTagKeyDown}
|
|
placeholder="Add tag and press Enter"
|
|
className="flex-1 block w-full min-w-0 px-3 py-2 text-foreground bg-card-bg border border-card-border rounded-l-md focus:outline-none focus:ring-accent-blue focus:border-accent-blue sm:text-sm"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={addTag}
|
|
className="inline-flex items-center px-3 py-2 text-sm font-medium text-white border border-transparent rounded-r-md shadow-sm bg-accent-blue hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
{formData.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
{formData.tags.map(tag => (
|
|
<span key={tag} className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-500/10 rounded-full text-accent-blue">
|
|
{tag}
|
|
<button
|
|
type="button"
|
|
onClick={() => removeTag(tag)}
|
|
className="flex-shrink-0 ml-1 text-accent-blue rounded-full hover:text-blue-400 focus:outline-none"
|
|
>
|
|
<span className="sr-only">Remove tag {tag}</span>
|
|
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{/* Footer */}
|
|
<div className="px-4 py-3 bg-card-bg flex justify-end space-x-3 border-t border-card-border">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-medium text-foreground bg-card-bg/70 border border-card-border rounded-md shadow-sm hover:bg-card-bg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-accent-blue border border-transparent rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-blue"
|
|
>
|
|
Create Link
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|