beautify: create coffee
This commit is contained in:
DeathKaioken
parent
1c87ba150e
commit
16ccb8de12
@ -106,75 +106,7 @@ export default function CreateSubscriptionPage() {
|
||||
|
||||
<div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
|
||||
<form onSubmit={onCreate} className="space-y-8">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
|
||||
<input id="title" name="title" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div>
|
||||
<label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
|
||||
<input
|
||||
id="price"
|
||||
name="price"
|
||||
required
|
||||
min={0.01}
|
||||
step={0.01}
|
||||
className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400"
|
||||
placeholder="0.00"
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setPrice(val);
|
||||
}}
|
||||
onBlur={e => {
|
||||
const num = parseFloat(e.target.value);
|
||||
if (!isNaN(num)) {
|
||||
setPrice(num.toFixed(2));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* Currency */}
|
||||
<div>
|
||||
<label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
|
||||
<input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
|
||||
</div>
|
||||
{/* Featured */}
|
||||
<div className="flex items-center gap-2 mt-6">
|
||||
<input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
|
||||
<label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
|
||||
</div>
|
||||
{/* Subscription Billing (Locked) + Availability */}
|
||||
<div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-900">Subscription Billing</label>
|
||||
<p className="mt-1 text-xs text-gray-600">Fixed monthly subscription billing (interval count = 1). These settings are locked.</p>
|
||||
<div className="mt-2 flex gap-4">
|
||||
<input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
||||
<input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
|
||||
<select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
|
||||
<option value="available">Available</option>
|
||||
<option value="unavailable">Unavailable</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
|
||||
<textarea id="description" name="description" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" rows={3} placeholder="Describe the product" value={description} onChange={e => setDescription(e.target.value)} />
|
||||
<p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
|
||||
</div>
|
||||
|
||||
{/* Picture Upload */}
|
||||
{/* Picture Upload moved to top */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-900 mb-2">Picture</label>
|
||||
<p className="text-xs text-gray-600 mb-3">Upload an image and crop it to fit the coffee thumbnail (16:9 aspect ratio, 144px height)</p>
|
||||
@ -241,6 +173,74 @@ export default function CreateSubscriptionPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description moved right after picture */}
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
|
||||
<textarea id="description" name="description" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" rows={3} placeholder="Describe the product" value={description} onChange={e => setDescription(e.target.value)} />
|
||||
<p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
|
||||
<input id="title" name="title" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div>
|
||||
<label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
|
||||
<input
|
||||
id="price"
|
||||
name="price"
|
||||
required
|
||||
min={0.01}
|
||||
step={0.01}
|
||||
className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400"
|
||||
placeholder="0.00"
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setPrice(val);
|
||||
}}
|
||||
onBlur={e => {
|
||||
const num = parseFloat(e.target.value);
|
||||
if (!isNaN(num)) {
|
||||
setPrice(num.toFixed(2));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/* Currency */}
|
||||
<div>
|
||||
<label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
|
||||
<input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
|
||||
</div>
|
||||
{/* Featured */}
|
||||
<div className="flex items-center gap-2 mt-6">
|
||||
<input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
|
||||
<label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
|
||||
</div>
|
||||
{/* Subscription Billing (Locked) + Availability */}
|
||||
<div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-blue-900">Subscription Billing</label>
|
||||
<p className="mt-1 text-xs text-gray-600">Fixed monthly subscription billing (interval count = 1). These settings are locked.</p>
|
||||
<div className="mt-2 flex gap-4">
|
||||
<input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
||||
<input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
|
||||
<select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
|
||||
<option value="available">Available</option>
|
||||
<option value="unavailable">Unavailable</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-end gap-x-4">
|
||||
<Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user