Shadcn UI About Block
About17 is an interactive profile section with tab-controlled content. The top area splits into a three-column left section showing role title and live timezone with current time, and a four-column right section with bio paragraph. Below a border divider, a tab row offers four options like Information, Work, Journal, and Archive. A location row shows city and contact info. The bottom displays a large image that changes based on the selected tab.
The tabs use client-side state to control which image displays. Active tabs show in foreground color while inactive tabs are muted. The timezone displays real-time using JavaScript date formatting. The image area has a tall fixed height. The seven-column grid creates an asymmetric layout.
This is a distinctive interactive block where content changes based on user selection. The live timezone adds a personal touch. The tab interaction makes it more engaging than static layouts. Requires four different images for each tab state plus bio content.
On mobile, the grid collapses with the tab row becoming horizontally scrollable. The image maintains its tall aspect ratio. Location info stacks vertically.
Dependencies
| Package | Type |
|---|---|
| react | NPM |