61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T8db7,"use client"; import * as React from "react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface ReviewDraft { rating: number; /** 1 = runs small, 3 = true to size, 5 = runs large (0 = not answered). */ fit: number; title: string; body: string; tags: string[]; recommend: boolean | null; name: string; email: string; initialOnly: boolean; photos: File[]; } export interface WriteAReviewFormProps { product?: { name: string; variant: string; image: string; purchased?: string }; tags?: string[]; minLength?: number; maxPhotos?: number; reward?: string; /** Called with the finished review. Return a promise to keep the button in its sending state. */ onSubmit?: (review: ReviewDraft) => void | Promise; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", field: "#111111", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", lineHi: "rgba(255,255,255,0.32)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", star: "#F5C451", starEmpty: "rgba(255,255,255,0.14)", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", error: "#FF7A70", scheme: "dark" as const, }, light: { bg: "#FFFFFF", card: "#F7F7F7", field: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", lineHi: "rgba(0,0,0,0.3)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", star: "#E0A100", starEmpty: "rgba(0,0,0,0.12)", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", error: "#D93025", scheme: "light" as const, }, }; type Palette = (typeof PALETTES)[keyof typeof PALETTES]; const PRODUCT = { name: "Minimal Watch", variant: "Black · 40 mm", image: "/demo/blocks/product-detail/watch-1.webp", purchased: "Delivered Oct 24" }; const TAGS = ["Comfortable", "Looks premium", "Great value", "Easy to read", "Lightweight", "Strap is stiff"]; const RATING_WORDS = ["", "Disappointing", "Not great", "It’s okay", "Really good", "Love it"]; const FIT = ["Runs small", "A bit small", "True to size", "A bit large", "Runs large"]; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; const STAR = "m12 2.8 2.8 5.8 6.3.9-4.6 4.4 1.1 6.3L12 17.2l-5.6 3 1.1-6.3-4.6-4.4 6.3-.9z"; type Field = "rating" | "title" | "body" | "name" | "email"; function displayName(name: string, initialOnly: boolean) { const parts = name.trim().split(/\s+/).filter(Boolean); if (!parts.length) return "Your name"; if (!initialOnly || parts.length === 1) return parts.join(" "); return `${parts[0]} ${parts[parts.length - 1][0].toUpperCase()}.`; } function Label({ htmlFor, id, children, hint, p }: { htmlFor?: string; id?: string; children: React.ReactNode; hint?: React.ReactNode; p: Palette }) { const Tag = htmlFor ? "label" : "span"; return (

{children} {hint ? ( {hint} ) : null}

); } function ErrorText({ id, show, children, p }: { id: string; show: boolean; children: React.ReactNode; p: Palette }) { return ( {show ? ( {children} ) : null} ); } export function WriteAReviewForm({ product = PRODUCT, tags = TAGS, minLength = 40, maxPhotos = 4, reward = "+50 Northline points", onSubmit, theme = "dark", className }: WriteAReviewFormProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const fid = (k: string) => `${uid}-${k}`; const [rating, setRating] = React.useState(0); const [hover, setHover] = React.useState(0); const [fit, setFit] = React.useState(0); const [title, setTitle] = React.useState(""); const [body, setBody] = React.useState(""); const [picked, setPicked] = React.useState([]); const [recommend, setRecommend] = React.useState(null); const [name, setName] = React.useState(""); const [email, setEmail] = React.useState(""); const [initialOnly, setInitialOnly] = React.useState(true); const [photos, setPhotos] = React.useState<{ id: string; url: string; file: File }[]>([]); const [drag, setDrag] = React.useState(false); const [tried, setTried] = React.useState(false); const [status, setStatus] = React.useState<"idle" | "sending" | "done">("idle"); const fileRef = React.useRef(null); const starRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const photosRef = React.useRef(photos); React.useEffect(() => { photosRef.current = photos; }, [photos]); React.useEffect(() => () => photosRef.current.forEach((x) => URL.revokeObjectURL(x.url)), []); const errors: Partial> = {}; if (!rating) errors.rating = "Pick a star rating."; if (!title.trim()) errors.title = "Add a short headline."; if (body.trim().length < minLength) errors.body = `Write at least ${minLength} characters so others can learn from it.`; if (!name.trim()) errors.name = "Add the name to show with your review."; if (!EMAIL.test(email.trim())) errors.email = "Enter a valid email. It’s never shown publicly."; const show = (k: Field) => tried && !!errors[k]; const left = Math.max(0, minLength - body.trim().length); const shown = hover || rating; const addFiles = (list: FileList | null) => { if (!list) return; const imgs = Array.from(list).filter((f) => f.type.startsWith("image/")); setPhotos((cur) => [...cur, ...imgs.slice(0, Math.max(0, maxPhotos - cur.length)).map((file, i) => ({ id: `${file.name}-${file.size}-${cur.length + i}`, url: URL.createObjectURL(file), file }))]); }; const removePhoto = (id: string) => setPhotos((cur) => { const hit = cur.find((x) => x.id === id); if (hit) URL.revokeObjectURL(hit.url); return cur.filter((x) => x.id !== id); }); const starKey = (e: React.KeyboardEvent, i: number) => { const next = e.key === "ArrowRight" || e.key === "ArrowUp" ? Math.min(5, i + 1) : e.key === "ArrowLeft" || e.key === "ArrowDown" ? Math.max(1, i - 1) : e.key === "Home" ? 1 : e.key === "End" ? 5 : 0; if (!next) return; e.preventDefault(); setRating(next); starRefs.current[next - 1]?.focus(); }; const submit = async (e: React.FormEvent) => { e.preventDefault(); setTried(true); const first = (["rating", "title", "body", "name", "email"] as Field[]).find((k) => errors[k]); if (first) { const el = first === "rating" ? starRefs.current[Math.max(0, rating - 1)] : document.getElementById(fid(first)); el?.focus(); return; } setStatus("sending"); const draft: ReviewDraft = { rating, fit, title: title.trim(), body: body.trim(), tags: picked, recommend, name: name.trim(), email: email.trim(), initialOnly, photos: photos.map((x) => x.file) }; await Promise.all([onSubmit?.(draft), new Promise((r) => setTimeout(r, reduce ? 0 : 900))]); setStatus("done"); }; const reset = () => { photos.forEach((x) => URL.revokeObjectURL(x.url)); setRating(0); setFit(0); setTitle(""); setBody(""); setPicked([]); setRecommend(null); setPhotos([]); setTried(false); setStatus("idle"); }; const inputStyle = (bad: boolean): React.CSSProperties => ({ background: p.field, color: p.title, borderColor: bad ? p.error : p.line }); const inputCls = "w-full rounded-xl border px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:opacity-60 focus:border-current"; const ease = [0.22, 1, 0.36, 1] as const; return (

{status === "done" ? (

Thanks, {name.trim().split(/\s+/)[0]}!

Your {rating}-star review of the {product.name} is being checked and usually goes live within a day. We’ll email {email.trim()} when it does.

{reward ? ( {reward} added ) : null}

Back to product

) : (

Northline reviews

Write a review

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */}

{product.name} {product.variant} {product.purchased ? ` · ${product.purchased}` : ""}

{/* Overall rating */}

Overall rating

setHover(0)}> {[1, 2, 3, 4, 5].map((i) => { const on = i <= shown; return ( { starRefs.current[i - 1] = el; }} type="button" role="radio" aria-checked={rating === i} aria-label={`${i} star${i > 1 ? "s" : ""}, ${RATING_WORDS[i]}`} tabIndex={(rating || 1) === i ? 0 : -1} onClick={() => setRating(i)} onMouseEnter={() => setHover(i)} onKeyDown={(e) => starKey(e, i)} whileTap={reduce ? undefined : { scale: 0.85 }} className="grid size-10 place-items-center rounded-lg outline-none focus-visible:ring-2" style={{ ["--tw-ring-color" as string]: p.lineHi }} > ); })}

{errors.rating}

{/* Fit */}

How does it fit?

{FIT.map((label, i) => { const on = fit === i + 1; return ( ); })}

Runs small True to size Runs large

{/* Title */}

Headline setTitle(e.target.value)} placeholder="Sum it up in a few words" aria-invalid={show("title")} aria-describedby={show("title") ? fid("title-err") : undefined} className={inputCls} style={inputStyle(show("title"))} /> {errors.title}

{/* Body */}

{left ? `${left} more characters` : "Looks good ✓"} } p={p} > Your review

setBody(e.target.value)}
                      placeholder="What did you like or dislike? How are you using it?"
                      aria-invalid={show("body")}
                      aria-describedby={show("body") ? fid("body-err") : undefined}
                      className={cn(inputCls, "resize-y leading-relaxed")}
                      style={inputStyle(show("body"))}
                    />
                    <div className="mt-2 h-1 overflow-hidden rounded-full" style={{ background: p.ghost }} aria-hidden="true">
                      <motion.div className="h-full rounded-full" animate={{ width: `${Math.min(100, (body.trim().length / minLength) * 100)}%`, background: left ? p.lineHi : p.accent }} transition={{ duration: reduce ? 0 : 0.25 }} />
                    </div>
                    <ErrorText id={fid("body-err")} show={show("body")} p={p}>
                      {errors.body}
                    </ErrorText>
                  </div>

{/* Tags */}
                  <div>
                    <Label id={fid("tags-label")} hint={`${picked.length}/3`} p={p}>
                      Quick tags
                    </Label>
                    <div role="group" aria-labelledby={fid("tags-label")} className="flex flex-wrap gap-2">
                      {tags.map((t) => {
                        const on = picked.includes(t);
                        const full = !on && picked.length >= 3;
                        return (
                          <motion.button
                            key={t}
                            type="button"
                            aria-pressed={on}
                            disabled={full}
                            onClick={() => setPicked((cur) => (on ? cur.filter((x) => x !== t) : [...cur, t]))}
                            whileTap={reduce || full ? undefined : { scale: 0.94 }}
                            className="inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[13px] transition-colors disabled:opacity-40"
                            style={{ borderColor: on ? p.title : p.line, background: on ? p.buttonBg : "transparent", color: on ? p.buttonText : p.body }}
                          >
                            {on ? (
                              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                                <path d="M5 12.5 10 17l9-10" />
                              </svg>
                            ) : null}
                            {t}
                          </motion.button>
                        );
                      })}
                    </div>
                  </div>

{/* Photos */}
                  <div>
                    <Label id={fid("photos-label")} hint={`${photos.length}/${maxPhotos}`} p={p}>
                      Add photos
                    </Label>
                    <input ref={fileRef} type="file" accept="image/*" multiple hidden onChange={(e) => (addFiles(e.target.files), (e.target.value = ""))} />
                    <div className="grid grid-cols-4 gap-2" aria-labelledby={fid("photos-label")} role="group">
                      <AnimatePresence initial={false}>
                        {photos.map((ph) => (
                          <motion.div
                            key={ph.id}
                            layout={!reduce}
                            initial={reduce ? false : { opacity: 0, scale: 0.8 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 0.8 }}
                            className="relative aspect-square overflow-hidden rounded-xl"
                            style={{ background: p.tile }}
                          >
                            {/* eslint-disable-next-line @next/next/no-img-element -- local object URL preview */}
                            <img src={ph.url} alt={ph.file.name} className="h-full w-full object-cover" />
                            <button type="button" onClick={() => removePhoto(ph.id)} aria-label={`Remove ${ph.file.name}`} className="absolute top-1.5 right-1.5 grid size-6 place-items-center rounded-full bg-black/70 text-white">
                              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" aria-hidden="true">
                                <path d="M6 6l12 12M18 6 6 18" />
                              </svg>
                            </button>
                          </motion.div>
                        ))}
                      </AnimatePresence>
                      {photos.length < maxPhotos ? (
                        <motion.button
                          layout={!reduce}
                          type="button"
                          onClick={() => fileRef.current?.click()}
                          onDragOver={(e) => (e.preventDefault(), setDrag(true))}
                          onDragLeave={() => setDrag(false)}
                          onDrop={(e) => (e.preventDefault(), setDrag(false), addFiles(e.dataTransfer.files))}
                          className={cn("flex aspect-square flex-col items-center justify-center gap-1 rounded-xl border border-dashed text-[12px] transition-colors", !photos.length && "col-span-4 aspect-auto h-24 flex-row gap-2 text-[13px]")}
                          style={{ borderColor: drag ? p.accent : p.lineHi, background: drag ? p.ghost : "transparent", color: p.body }}
                        >
                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                            <rect x="3" y="5" width="18" height="15" rx="3" />
                            <circle cx="12" cy="12.5" r="3.5" />
                            <path d="M8.5 5 10 3h4l1.5 2" />
                          </svg>
                          {photos.length ? "Add" : "Drop photos here or browse"}
                        </motion.button>
                      ) : null}
                    </div>
                  </div>

{/* Recommend */}
                  <div>
                    <Label id={fid("rec-label")} hint="Optional" p={p}>
                      Would you recommend it?
                    </Label>
                    <div role="radiogroup" aria-labelledby={fid("rec-label")} className="flex gap-2">
                      {[
                        { v: true, label: "Yes" },
                        { v: false, label: "No" },
                      ].map((o) => {
                        const on = recommend === o.v;
                        return (
                          <button
                            key={o.label}
                            type="button"
                            role="radio"
                            aria-checked={on}
                            onClick={() => setRecommend(on ? null : o.v)}
                            className="rounded-full border px-5 py-2 text-[14px] font-medium transition-colors"
                            style={{ borderColor: on ? p.title : p.line, background: on ? p.buttonBg : "transparent", color: on ? p.buttonText : p.body }}
                          >
                            {o.label}
                          </button>
                        );
                      })}
                    </div>
                  </div>

{/* Identity */}
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div>
                      <Label htmlFor={fid("name")} p={p}>
                        Name
                      </Label>
                      <input
                        id={fid("name")}
                        value={name}
                        autoComplete="name"
                        onChange={(e) => setName(e.target.value)}
                        placeholder="Daniel Okafor"
                        aria-invalid={show("name")}
                        aria-describedby={show("name") ? fid("name-err") : undefined}
                        className={inputCls}
                        style={inputStyle(show("name"))}
                      />
                      <ErrorText id={fid("name-err")} show={show("name")} p={p}>
                        {errors.name}
                      </ErrorText>
                    </div>
                    <div>
                      <Label htmlFor={fid("email")} p={p}>
                        Email
                      </Label>
                      <input
                        id={fid("email")}
                        type="email"
                        value={email}
                        autoComplete="email"
                        onChange={(e) => setEmail(e.target.value)}
                        placeholder="you@example.com"
                        aria-invalid={show("email")}
                        aria-describedby={show("email") ? fid("email-err") : undefined}
                        className={inputCls}
                        style={inputStyle(show("email"))}
                      />
                      <ErrorText id={fid("email-err")} show={show("email")} p={p}>
                        {errors.email}
                      </ErrorText>
                    </div>
                  </div>
                  <label className="-mt-3 flex cursor-pointer items-center gap-2.5 text-[13px]">
                    <input type="checkbox" checked={initialOnly} onChange={(e) => setInitialOnly(e.target.checked)} className="size-4 rounded" style={{ accentColor: p.accent }} />
                    Show only my first name and last initial
                  </label>

<div className="flex flex-col-reverse items-stretch gap-3 border-t pt-6 sm:flex-row sm:items-center sm:justify-between" style={{ borderColor: p.line }}>
                    <p className="text-[12px] leading-relaxed" style={{ color: p.muted }}>
                      By submitting you agree to our review guidelines. Reviews are checked before they go live.
                    </p>
                    <motion.button
                      type="submit"
                      disabled={status === "sending"}
                      whileTap={reduce ? undefined : { scale: 0.97 }}
                      className="inline-flex shrink-0 items-center justify-center gap-2 rounded-full px-6 py-3 text-[14px] font-semibold disabled:opacity-80"
                      style={{ background: p.buttonBg, color: p.buttonText }}
                    >
                      {status === "sending" ? (
                        <>
                          <motion.span className="size-4 rounded-full border-2 border-current border-t-transparent" animate={reduce ? undefined : { rotate: 360 }} transition={{ repeat: Infinity, duration: 0.8, ease: "linear" }} aria-hidden="true" />
                          Sending…
                        </>
                      ) : (
                        "Submit review"
                      )}
                    </motion.button>
                  </div>
                </form>

{/* Live preview */}
                <aside aria-label="Review preview">
                  <p className="mb-3 text-[12px] font-medium tracking-[0.14em] uppercase" style={{ color: p.muted }}>
                    Preview
                  </p>
                  <div className="rounded-2xl border p-5" style={{ borderColor: p.line, background: p.card }}>
                    <div className="flex items-center justify-between gap-3">
                      <span className="flex gap-0.5" aria-label={rating ? `${rating} out of 5 stars` : "No rating yet"}>
                        {[1, 2, 3, 4, 5].map((i) => (
                          <svg key={i} width="15" height="15" viewBox="0 0 24 24" aria-hidden="true">
                            <path d={STAR} fill={i <= rating ? p.star : p.starEmpty} style={{ transition: "fill 150ms" }} />
                          </svg>
                        ))}
                      </span>
                      <span className="text-[11px]" style={{ color: p.muted }}>
                        Just now
                      </span>
                    </div>
                    <p className="mt-3 text-[15px] font-semibold break-words" style={{ color: title.trim() ? p.title : p.muted }}>
                      {title.trim() || "Your headline"}
                    </p>
                    <p className="mt-1.5 line-clamp-5 text-[13px] leading-relaxed break-words" style={{ color: body.trim() ? p.body : p.muted }}>
                      {body.trim() || "Your review will show up here as you type."}
                    </p>
                    <AnimatePresence initial={false}>
                      {picked.length ? (
                        <motion.div key="tags" initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} className="overflow-hidden">
                          <div className="flex flex-wrap gap-1.5 pt-3">
                            {picked.map((t) => (
                              <span key={t} className="rounded-full px-2 py-0.5 text-[11px]" style={{ background: p.ghost, color: p.body }}>
                                {t}
                              </span>
                            ))}
                          </div>
                        </motion.div>
                      ) : null}
                    </AnimatePresence>
                    {photos.length ? (
                      <div className="mt-3 flex gap-1.5">
                        {photos.map((ph) => (
                          // eslint-disable-next-line @next/next/no-img-element -- local object URL preview
                          <img key={ph.id} src={ph.url} alt="" className="size-11 rounded-lg object-cover" />
                        ))}
                      </div>
                    ) : null}
                    {fit || recommend !== null ? (
                      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-[12px]">
                        {fit ? (
                          <span>
                            Fit: <span style={{ color: p.title }}>{FIT[fit - 1]}</span>
                          </span>
                        ) : null}
                        {recommend !== null ? <span style={{ color: recommend ? p.accent : p.error }}>{recommend ? "Recommends this" : "Doesn’t recommend"}</span> : null}
                      </div>
                    ) : null}
                    <div className="mt-4 flex items-center gap-2 border-t pt-3 text-[12px]" style={{ borderColor: p.line }}>
                      <span className="grid size-6 place-items-center rounded-full text-[11px] font-semibold" style={{ background: p.ghost, color: p.title }} aria-hidden="true">
                        {name.trim() ? name.trim()[0].toUpperCase() : "?"}
                      </span>
                      <span style={{ color: p.title }}>{displayName(name, initialOnly)}</span>
                      <span className="inline-flex items-center gap-1" style={{ color: p.accent }}>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                          <path d="M5 12.5 10 17l9-10" />
                        </svg>
                        Verified buyer
                      </span>
                    </div>
                  </div>
                  <ul className="mt-5 hidden space-y-2 text-[12px] leading-relaxed md:block" style={{ color: p.muted }}>
                    <li>• Say how long you’ve used it and what for.</li>
                    <li>• Photos in daylight help others the most.</li>
                    <li>• Skip prices, links and personal details.</li>
                  </ul>
                </aside>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
}

export default WriteAReviewForm;
60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/write-a-review-form/write-a-review-form.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>