shadcn.io is not affiliated with official shadcn/ui
Ranked Video Grid Creator Profile Block for Ark UI
A creator profile with four follower tiles and nine drawn video thumbnails that a group of three buttons ranks by views, engagement or watch time, each with its number, its metric and a badge on the top one.
Installation
Overview
Rank a creator's videos on the number that matters to you with this ranked video grid for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the creator: initials, name, role, place and a badge with her followers in all. A strip of four tiles follows, one for each network she posts on (invented ones, each with a two-letter mark): the followers now and how many more or fewer than a month ago, worked out from two typed counts, with an arrow and a word, never a colour. Under it a group of three Toggle Group buttons ranks the nine drawn greyscale thumbnails by views, engagement (likes, comments and shares over views) or watch time (views times the average time watched). Pressing one re-ranks the grid, numbers every thumbnail, shows that metric under each title and marks the first video with a Badge that names the metric. A polite line says what the grid is ranked by and which video leads. Nothing plays. It's built from Toggle Group, Badge, Avatar and Guides, with the thumbnails drawn as SVG paths in the theme's greys and a CSS entrance only. The creator, her networks and every figure are invented samples. For a creator hub, a channel page or any profile that ranks work by a measure.
FAQ
How do I fill it with my own channel?
Edit NETWORKS (a name, a two-letter mark, followers now and a month ago) and VIDEOS, made with video(id, title, kind, length, views, interactions, avg) where length and average watch time are in seconds. The followers in all, the change this month, the engagement rate and the hours watched are all worked out from those numbers, so nothing is typed twice. To use real thumbnails, replace Thumb with an img and object-cover.
How is each ranking worked out?
Views is the typed count. Engagement is interactions divided by views, shown as a percentage. Watch time is views times the average seconds watched, divided by 3,600, shown as hours. A tie goes to the video that comes first in the list. The grid only re-ranks when you press a button, never under the pointer, and the polite line says what it is ranked by.
What stays local, and how do I make it real?
All of it: the figures are typed examples, nothing plays and nothing is fetched. In your own app load the networks and videos from your analytics and keep the same helpers, which only need a list and a metric. Say where the numbers come from and how old they are, as the header does for the sample.
Why are the networks invented, and how do I use real ones?
The tiles show invented networks so the block names no real service. Each mark is two typed letters in a neutral tile with no logo and no brand colour; to name a real network, type its name and its own two letters, and add its logo only if you have the right to use it.
Is it accessible?
The three metric buttons are a named group that follows the arrow keys, the grid is an ordered list whose label says what it is ranked by, the drawn thumbnails are hidden from assistive technology, and a decrease in followers is a word and an arrow, not a tone. The status line is a polite live region present from the start. Titles and figures keep their reading order in a right-to-left page.
Related
- Photographer EXIF Inspector ProfileVisual portfolios
- Videographer Project Table ProfileVisual portfolios
- Traffic With A Compare Line Blogger ProfilePersonal stats
- Weekly Content Queue Social Media Manager ProfileTeam dashboards
- Filterable GalleryFilter, sort and tabs
- Ranked List Leaderboard StatsLeaderboards