Concept approval

Round-of-concepts review surface — version eyebrow, file carousel, header actions, and an optional comment thread with a POST-backed composer.

V2posted 2h ago by Marisol

Summer at the Movies — Concepts

Title Card

Here's Round 2. We leaned into the 70s marquee reference, pushed the italic coral pop on "Summer", and softened the gradient behind it. Let me know where to tighten.

summer-v2-spec.pdf242 KB

8:44 PM

Looks great! Adding a couple pins.

9:09 PM

Marisol VegaHere's Round 2. We leaned into the 70s marquee reference…

Love the marquee — can we bump the coral one more notch so it pops on dark backgrounds?

9:14 PM

Sarah ReyesLove the marquee — can we bump the coral one more notch?

Totally. I'll push it toward the brand coral and re-export the social tile too.

9:34 PM

Stage graphic reads really well from the back of the room 👏

9:49 PM

Agreed. One nit: tighten the leading on the subtitle so it sits closer to the headline.

10:04 PM

Done — leading tightened and V2.1 is uploading now. Should land in a few minutes.

10:19 PM

Nice. Once Sarah signs off I'll queue it for the Friday send.

10:32 PM

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/concept-approval.json

Usage

Drop the block into a review page. Pass a `commentEndpoint` to POST comments; omit `commentsEnabled` to disable the thread.

TSImport

import { ConceptApproval } from "@/components/blocks/concept-approval";

TSExample

import { CheckIcon } from "lucide-react";
import { ConceptApproval } from "@/components/blocks/concept-approval";

export function ReviewPage() {
  return (
    <ConceptApproval
      version={2}
      versions={[1, 2]}
      title="Summer at the Movies — Concepts"
      files={[
        { id: "title", kind: "image", src: "/concepts/title.jpg", label: "Title Card" },
      ]}
      actions={[
        { id: "approve", label: "Approve", icon: <CheckIcon />, onClick: () => {} },
      ]}
      commentEndpoint="/api/concepts/round-2/comments"
    />
  );
}

Composition

A single ConceptApproval component with prop-driven header, carousel, and comment surfaces.

ConceptApproval                  — review surface for a round of concepts
├── header
│   ├── version eyebrow          — "Round 2 · posted 2h ago by Marisol"
│   ├── title                    — heading next to the eyebrow
│   └── actions[]                — Download / Revise / Approve buttons
├── carousel                     — images or videos with arrows + dots
│   └── label                    — caption under the active file
└── comments (commentsEnabled)    — rendered with the Messaging <Chat> block
    ├── thread                   — comments[] as ChatMessage (replies, reactions, attachments)
    └── composer                 — Chat composer; onSend POSTs to commentEndpoint

Preview

Full block with version eyebrow, action row, file carousel, existing thread, and composer.

V2posted 2h ago by Marisol

Summer at the Movies — Concepts

Title Card

Here's Round 2. We leaned into the 70s marquee reference, pushed the italic coral pop on "Summer", and softened the gradient behind it. Let me know where to tighten.

summer-v2-spec.pdf242 KB

8:44 PM

Looks great! Adding a couple pins.

9:09 PM

Marisol VegaHere's Round 2. We leaned into the 70s marquee reference…

Love the marquee — can we bump the coral one more notch so it pops on dark backgrounds?

9:14 PM

Sarah ReyesLove the marquee — can we bump the coral one more notch?

Totally. I'll push it toward the brand coral and re-export the social tile too.

9:34 PM

Stage graphic reads really well from the back of the room 👏

9:49 PM

Agreed. One nit: tighten the leading on the subtitle so it sits closer to the headline.

10:04 PM

Done — leading tightened and V2.1 is uploading now. Should land in a few minutes.

10:19 PM

Nice. Once Sarah signs off I'll queue it for the Friday send.

10:32 PM

Comments disabled

Pass `commentsEnabled={false}` to hide the thread and composer entirely.

V2posted 2h ago by Marisol

Summer at the Movies — Concepts

Title Card

Single file

With a single file the carousel arrows and pagination dots are hidden.

V1just posted

Logo lockup — first pass

Title Card

Here's Round 2. We leaned into the 70s marquee reference, pushed the italic coral pop on "Summer", and softened the gradient behind it. Let me know where to tighten.

summer-v2-spec.pdf242 KB

8:44 PM

API Reference

Props for the block plus the shape of file, comment, and action entries.

ConceptApproval

Prop	Type	Default	Description
`version`	number	—	Current version number — rendered in the eyebrow badge as `V{n}`.
`versions`	number[]	—	All available versions. When more than one, version-switching tabs render in the top-right of the header.
`onVersionChange`	(version: number) => void	—	Called when the user picks a different version from the tabs.
`title`	React.ReactNode	—	Heading next to the version chip.
`subtitle`	React.ReactNode	—	Inline metadata after the version ("posted 2h ago by Marisol").
`files`	ConceptApprovalFile[]	—	Images / videos shown in the carousel.
`actions`	ConceptApprovalAction[]	—	Buttons rendered in the header (Download / Revise / Approve).
`commentsEnabled`	boolean	true	Show or hide the comment thread + composer.
`comments`	ChatMessage[]	—	The feedback thread — the Messaging block's `ChatMessage[]` shape (inline attachments / reactions / replyTo). Rendered with `<Chat>`.
`commentEndpoint`	string	—	POST URL for new comments. Receives `{ body, version, fileId }`.
`onSubmitComment`	(c) => void \| Promise<void>	—	Called after a successful submit, with `{ body, version }`.
`currentUserId`	string	"you"	Id of the viewer — own messages align right; drives reaction state.
`currentUserName`	string	"You"	Display name stamped on messages you send.
`placeholder`	string	"Leave feedback for your Squad…"	Composer placeholder.
`className`	string	—	Extra classes merged onto the outer section.

ConceptApprovalFile

Prop	Type	Default	Description
`id`	string	—	Stable id for keying and comment payloads.
`kind`	"image" \| "video"	"image"	Render an <img> or a controlled <video>.
`src`	string	—	Asset URL.
`poster`	string	—	Poster image for videos.
`label`	string	—	Caption shown under the active file in the carousel.
`alt`	string	—	Image alt text. Falls back to the label.

ConceptApprovalComment

Prop	Type	Default	Description
`id`	string	—	Stable id.
`senderId`	string	—	Matched against `currentUserId` — own messages align right.
`senderName`	string	—	Author name — initials and avatar color are derived from this.
`senderAvatar`	string \| null	—	Optional photo URL (falls back to initials).
`text`	string	—	Message body.
`timestamp`	Date \| string \| number	—	When the message was posted — auto-formatted into a time.
`attachments`	ChatAttachment[]	—	`{ id, name, url?, size?, type? }` — images preview inline.
`reactions`	ChatReaction[]	—	`{ emoji, users: string[] }` — count = users.length.
`replyTo`	ChatReplyRef	—	`{ id, senderName, text }` — quoted parent message.

ConceptApprovalAction

Prop	Type	Default	Description
`id`	string	—	Stable key for the action.
`label`	string	—	Button label.
`icon`	React.ReactNode	—	Optional lucide icon.
`onClick`	() => void	—	Click handler.
`variant`	ButtonProps["variant"]	"outline"	Forwarded to the squad-ui Button.
`size`	ButtonProps["size"]	"default"	Forwarded to the squad-ui Button.