I LOVE WOMEN

frontend/src/components/LinkForm.tsx

@@ -2,18 +2,19 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import * as z from 'zod'
-import { CreateLinkRequest, Link } from '../types/api'
+import { CreateLinkRequest } from '../types/api'
 import { createShortLink } from '../api/client'
 import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { LinkIcon } from "lucide-react"
 import {
 	Form,
 	FormControl,
 	FormField,
-	FormItem,
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
 import { useToast } from "@/hooks/use-toast"
 
 const formSchema = z.object({
@@ -29,7 +30,7 @@ const formSchema = z.object({
 })
 
 interface LinkFormProps {
-	onSuccess: (link: Link) => void
+	onSuccess: () => void;
 }
 
 export function LinkForm({ onSuccess }: LinkFormProps) {
@@ -47,9 +48,9 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
 	const onSubmit = async (values: z.infer<typeof formSchema>) => {
 		try {
 			setLoading(true)
-			const link = await createShortLink(values as CreateLinkRequest)
+			await createShortLink(values as CreateLinkRequest)
 			form.reset()
-			onSuccess(link)
+			onSuccess() // Call the onSuccess callback to trigger refresh
 			toast({
 				description: "Short link created successfully",
 			})
@@ -65,45 +66,51 @@ export function LinkForm({ onSuccess }: LinkFormProps) {
 	}
 
 	return (
-		<div className="max-w-[500px] mx-auto">
-			<Form {...form}>
-				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-					<FormField
-						control={form.control}
-						name="url"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>URL</FormLabel>
-								<FormControl>
-									<Input placeholder="https://example.com" {...field} />
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
+		<Card className="mb-8">
+			<CardHeader>
+				<CardTitle>Create Short Link</CardTitle>
+				<CardDescription>Enter a URL to generate a shortened link</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 md:flex-row md:items-end">
+						<FormField
+							control={form.control}
+							name="url"
+							render={({ field }) => (
+								<div className="flex-1 space-y-2">
+									<FormLabel>URL</FormLabel>
+									<FormControl>
+										<div className="relative">
+											<LinkIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+											<Input placeholder="https://example.com" className="pl-9" {...field} />
+										</div>
+									</FormControl>
+									<FormMessage />
+								</div>
+							)}
+						/>
 
-					<FormField
-						control={form.control}
-						name="custom_code"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Custom Code (optional)</FormLabel>
-								<FormControl>
-									<Input placeholder="example" {...field} />
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
+						<FormField
+							control={form.control}
+							name="custom_code"
+							render={({ field }) => (
+								<div className="w-full md:w-1/4 space-y-2">
+									<FormLabel>Custom Code <span className="text-muted-foreground">(optional)</span></FormLabel>
+									<FormControl>
+										<Input placeholder="custom-code" {...field} />
+									</FormControl>
+									<FormMessage />
+								</div>
+							)}
+						/>
 
-					<div className="flex justify-end">
-						<Button type="submit" disabled={loading}>
+						<Button type="submit" disabled={loading} className="md:w-auto">
 							{loading ? "Creating..." : "Create Short Link"}
 						</Button>
-					</div>
-				</form>
-			</Form>
-		</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
 	)
-}
-
+}