Source Fan-Out Detail Integration Block for React

The block names Segment in text, the way any integration page says what it works with, and ships no Segment logo, colour or wordmark. Segment's tile is a neutral lettermark, Sg in a muted square, sitting in an icon slot that a code comment marks: drop in the official logo only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. Schemawick's own tile has an icon slot for your logo. The pair is hidden from assistive technology because the heading already names both products.

Both buttons are links (href="#"). Point Connect Segment at your own connect flow, where the buyer pastes a token, and View docs at your setup guide. Nothing connects, signs in or sends anything from the block itself. Connect Segment is a Shine Button, the block's one primary action; View docs is an outline button. Both buttons render the link they're given with render, with nativeButton={false}.

Segment's Public API tokens carry a workspace role (Workspace Owner or Workspace Member) rather than named scopes, so the block lists what the product reads in three groups instead of inventing scope names, and says so above the accordion. Tokens are created in the workspace settings under Access Management and Tokens. Edit GROUPS to match what your product really reads and writes; each group is a title, a Reads line and a Writes line.

It opens one group at a time with the first open, and closed groups stay in the page. Each trigger sits in its own heading with a Read badge (an icon and a word), so the access is never colour alone. Tab moves between the triggers, and Enter or Space opens one.

The four destinations are a real list; the drawing around them is decoration. On a wide screen the curves are one SVG of cubic strokes that keep the same line width at any size, joining the source to each row, with a dot where they leave it. The barred destination has a dashed curve, a dashed chip, a ban icon and the words "held" for a screen reader, and the caption says how many events are off plan. On a phone a spine and ticks replace the curves. Change DESTINATIONS to show your own.

Below lg the divider gives way to a rule between the copy and the figure, which stack in reading order. The drawing is a spatial diagram, so it keeps its left-to-right layout in a right-to-left page while the text around it flips. The header and the buttons fade up once on load with CSS transitions; with reduced motion they simply appear. The block has no state beyond the accordion.