feat : update

components/admin/guide-overview-form.tsx

@@ -26,6 +26,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { useAutosave } from "@/hooks/use-autosave";
 import { adminDraftKey } from "@/lib/editor/local-draft";
 import { parseYouTubeUrl } from "@/lib/guides/youtube";
+import { cn } from "@/lib/utils";
 
 export function GuideOverviewForm({
   guide,
@@ -55,6 +56,8 @@ export function GuideOverviewForm({
     !overview.trim() ? "กรุณากรอก Overview" : null,
     invalidYoutubeUrl ? "กรุณาใส่ลิงก์วิดีโอ YouTube ที่ถูกต้อง" : null,
   ].filter((issue): issue is string => Boolean(issue));
+  const invalidCover = !cover.id;
+  const invalidOverview = !overview.trim();
   const localDraft = { overview, youtubeUrl, cover };
   const autosave = useAutosave({
     value,
@@ -107,9 +110,12 @@ export function GuideOverviewForm({
       </CardHeader>
       <CardContent>
         <FieldGroup>
-          <Field>
+          <Field data-invalid={invalidCover}>
             <FieldLabel>Guide Image</FieldLabel>
-            <div className="relative mx-auto aspect-square w-full max-w-md overflow-hidden rounded-lg border">
+            <div className={cn(
+              "relative mx-auto aspect-square w-full max-w-md overflow-hidden rounded-lg border",
+              invalidCover && "border-destructive",
+            )}>
               <Image
                 src={cover.url}
                 alt={`Guide ${guide.name}`}
@@ -119,11 +125,12 @@ export function GuideOverviewForm({
             </div>
             <MediaUploader onReady={(asset) => setCover(asset)} />
           </Field>
-          <Field>
+          <Field data-invalid={invalidOverview}>
             <FieldLabel htmlFor="guide-overview">Overview</FieldLabel>
             <Textarea
               id="guide-overview"
               value={overview}
+              aria-invalid={invalidOverview}
               maxLength={500}
               onChange={(event) => setOverview(event.target.value)}
             />