Selectable Hook Snippets

Shadcn UI Code Example Block

CodeExample6 is a documentation-style section built with shadcn/ui, centered intro copy, then a row of three tappable cards that swap the active snippet. Each card shows a hook name, short benefit line, and filename. Below, a bordered code panel shows the matching TypeScript with header, horizontal scroll, and copy affordance. A wide outline button closes the section.

Cards pick up border and muted fill when selected; unselected cards lighten on hover. The code area uses the standard card shell. Typography is large on the title, muted on the subhead, monospace cues on filenames. The layout stacks the picker row above the editor on narrow viewports. Static aside from selection state.

This block is moderate complexity: mostly structured data arrays plus client state for the active id. The educational angle is clear (three common React hooks). You would replace the sample strings with your own APIs or internal utilities.

The grid is responsive: cards sit in a column on small screens and a row from the medium breakpoint up. Long lines scroll inside the code region so the page width stays stable.