Socials: Platform Links with Stats and Info Bars

The Socials component is a full-screen social media hub styled after the Persona 3 menu system. The screen is divided into two keyboard-navigable panels: a left column listing social platforms (Twitch, Instagram, TikTok) and a right column showing a stack of animated info bars for the active platform. Each bar represents an individual link with a view count and an optional “NEW” badge. Focus flows between panels using the arrow keys, and all links open in a new tab.

Props

Socials is a standalone route component. It accepts no props and manages all state and navigation internally via React Router’s useNavigate hook.

Two-Panel Layout

Left Panel — Platform List A vertical stack of .sc-bar-outer rows, one per entry in ITEMS. The active platform’s bar expands to 90px, reveals the red underlay (.sc-bar-red), and shows a white fill growing from the right. Platform icon, label, and handle text are all rendered inside the bar. A .sc-right-nav overlay in the top-right corner shows the LB / RB navigation hints. Right Panel — Info Bars (.sc-info-bar-wrap) A set of fixed-position bars slides in from the right whenever the active platform changes, animated via the sc-infobar-in keyframe with staggered delays. Bars start at top: 155px and are spaced 52px apart per bar index. Each bar corresponds to one entry in the active item’s links array and displays the matching count from counts. Bars at indices listed in newBars show a newsign.png “NEW” badge overlay. When focus is on the right panel, the selected bar gains a black border and white background (.sc-info-bar-wrap.selected).

The ITEMS Array

Each entry in ITEMS defines one platform and all its associated bar content:

const ITEMS = [
  {
    id: "twitch",
    label: "TWITCH",
    handle: "@yourname",
    href: "https://twitch.tv/yourname",
    icon: "🎮",
    barIcon: icon1,       // imported image asset for the icon slot in the bar
    bars: 1,              // number of info bars shown in the right panel
    newBars: [0],         // bar indices that display the "NEW" badge
    counts: ["56"],       // view/count string for each bar
    links: ["twitch.tv/videos/..."], // URL for each bar row
    stats: [
      { tag: "FOL", value: "1.2K", color: "#9147ff" },
      { tag: "VWR", value: "042",  color: "#bf94ff"  },
    ],
  },
  {
    id: "instagram",
    label: "INSTAGRAM",
    handle: "@yourhandle",
    href: "https://instagram.com/yourhandle",
    icon: "📷",
    barIcon: icon2,
    bars: 5,
    newBars: [1, 2],
    counts: ["3.4M", /* one per bar */ ],
    links: ["https://instagram.com/p/...", /* one per bar */ ],
    stats: [
      { tag: "FOL", value: "3.4K", color: "#e1306c" },
      { tag: "PST", value: "128",  color: "#f77737"  },
    ],
  },
  {
    id: "tiktok",
    label: "TIKTOK",
    handle: "@yourhandle",
    href: "https://tiktok.com/@yourhandle",
    icon: "🎵",
    barIcon: icon3,
    bars: 7,
    newBars: [0, 3, 5, 6],
    counts: ["5.1M", /* one per bar */ ],
    links: ["https://tiktok.com/@yourhandle/video/...", /* one per bar */ ],
    stats: [
      { tag: "FOL", value: "8.9K", color: "#00f2ea" },
      { tag: "LKS", value: "52K",  color: "#ff0050"  },
    ],
  },
];

Field	Type	Purpose
`id`	`string`	Unique React key
`label`	`string`	Platform name shown as the bar heading
`handle`	`string`	Your username/handle shown as subtext
`href`	`string`	Main platform profile URL (opened when Enter is pressed on the left panel)
`icon`	`string`	Emoji rendered left of the label in the platform bar
`barIcon`	`image`	Imported PNG/SVG asset for the icon slot
`bars`	`number`	How many info bar rows to render in the right panel
`newBars`	`number[]`	Zero-based indices of right-panel bars that show the “NEW” badge
`counts`	`string[]`	View or engagement count string displayed in each right-panel bar
`links`	`string[]`	URL opened when Enter is pressed on a right-panel bar
`stats`	`object[]`	Two stat chips shown at the bottom of the bar — see Stats Object below

Stats Object

Each stats array contains exactly two chip objects that are rendered as colored tag-value pairs inside the platform bar:

{ tag: "FOL", value: "3.4K", color: "#e1306c" }

Field	Type	Purpose
`tag`	`string`	Short uppercase abbreviation (e.g. `"FOL"` for followers, `"LKS"` for likes)
`value`	`string`	The formatted stat value (e.g. `"3.4K"`, `"52K"`, `"042"`)
`color`	`string`	CSS color string applied to the chip background or accent

Use platform-appropriate abbreviations and brand colors to make the chips visually match each network.

Info Bars

The right panel renders one bar row for each index up to ITEMS[active].bars. The bars are fixed-position, starting at top: 155px for the first bar and increasing by 52px per bar index (i.e. bar i is at top: 155 + i * 52 px). The bar at position i maps to:

Label / link — ITEMS[active].links[i] — opened in a new tab on Enter
Count — ITEMS[active].counts[i] — displayed as a view or engagement figure
NEW badge — shown if i is included in ITEMS[active].newBars

Make sure links and counts each have at least bars entries, or the bar rows at those indices will render empty values.

New Badge

Import newsign.png from your assets folder and place it in src/assets/. It will be shown as an overlay badge on any bar whose index appears in newBars. Remove an index from newBars when the content is no longer new.

Keyboard Controls

Focus state is either "left" (platform list) or "right" (info bars). The active focus panel is tracked in component state.

Left Focus (platform list)

Key	Effect
`ArrowUp`	Move selection to the previous platform
`ArrowDown`	Move selection to the next platform
`Enter`	Open `ITEMS[active].href` in a new tab
`ArrowRight`	Move focus to the right panel (`focus → "right"`) and reset selected bar to `0`
`ArrowLeft`	Navigate back (`navigate(-1)`)
`Escape` / `Backspace`	Navigate back (`navigate(-1)`)

Right Focus (info bars)

Key	Effect
`ArrowUp`	Move selection to the previous info bar
`ArrowDown`	Move selection to the next info bar
`Enter`	Open `ITEMS[active].links[selectedBar]` in a new tab
`ArrowLeft`	Move focus back to the left panel (`focus → "left"`)
`Escape` / `Backspace`	Navigate back (`navigate(-1)`)

Focus State

The focus state string controls which panel receives keyboard input:

// initial state
const [focus, setFocus] = useState("left");

When focus === "left", the platform list handles all key events. Pressing → switches focus to "right" and resets the selected bar index to 0, enabling navigation within the info bars for the active platform. Pressing ← from the right panel returns focus to "left" without changing the active platform. Note that the selected bar index is only reset to 0 when → is pressed to move focus to the right panel — it is not automatically reset when the active platform changes via ↑/↓.

Adding a New Platform

Import an icon asset

Add your bar icon image to src/assets/ and import it at the top of Socials.jsx:

import icon4 from "../assets/icon4.png";

Append an entry to ITEMS

Add a new object at the end of the ITEMS array:

{
  id: "youtube",
  label: "YOUTUBE",
  handle: "@yourchannel",
  href: "https://youtube.com/@yourchannel",
  icon: "▶️",
  barIcon: icon4,
  bars: 4,
  newBars: [0],
  counts: ["12K", "8.3K", "5.1K", "2.9K"],
  links: [
    "https://youtube.com/watch?v=...",
    "https://youtube.com/watch?v=...",
    "https://youtube.com/watch?v=...",
    "https://youtube.com/watch?v=...",
  ],
  stats: [
    { tag: "SUB", value: "4.2K", color: "#ff0000" },
    { tag: "VWS", value: "88K",  color: "#ff6600" },
  ],
}

Verify counts and links length

Confirm that counts and links each contain exactly bars entries (4 in this example). Mismatched lengths will cause empty or broken bar rows.

Every handle, href, and links entry in the default ITEMS array contains placeholder values like "@yourname" and "https://twitch.tv/yourname". Replace all of these with your real handles and URLs before deploying. The label values ("TWITCH", "INSTAGRAM", "TIKTOK") and stats values can also be updated to reflect your actual follower and engagement numbers.

CSS Classes Reference

Class	Description
`.sc-bar`	Core bar shape — `45vw` wide, `64px` tall, `#111` background, clip-path parallelogram
`.sc-bar-outer.active`	Expands bar to `90px`, exposes `.sc-bar-red` (`#c4001a`) underlay
`.sc-bar-fill`	White section that grows from the right edge of the active bar
`.sc-bar-red`	Red parallelogram underlay revealed on active bar
`.sc-right-nav`	Fixed top-right overlay with LB / RB navigation hints at `100px` font size
`.sc-info-bar-wrap`	Right-panel info bar row — fixed position starting at `top: 155px`, staggered `52px` per bar, slides in via `sc-infobar-in`
`.sc-info-bar-wrap.selected`	Selected info bar — black border and white background
`sc-infobar-in`	Keyframe — bar slides in from the right edge of the screen

Navigation

Pages

Customization

Socials: Platform Links with Stats and Info Bars

Props

Two-Panel Layout

The ITEMS Array

Stats Object

Info Bars

New Badge

Keyboard Controls

Left Focus (platform list)

Right Focus (info bars)

Focus State

Adding a New Platform

CSS Classes Reference

Build docs developers (and LLMs) love

Navigation

Pages

Customization

Documentation Index

​Props

​Two-Panel Layout

​The ITEMS Array

​Stats Object

​Info Bars

​New Badge

​Keyboard Controls

​Left Focus (platform list)

​Right Focus (info bars)

​Focus State

​Adding a New Platform

​CSS Classes Reference

Build docs developers (and LLMs) love

Props

Two-Panel Layout

The ITEMS Array

Stats Object

Info Bars

New Badge

Keyboard Controls

Left Focus (platform list)

Right Focus (info bars)

Focus State

Adding a New Platform

CSS Classes Reference