Ranking

Displays a ranking table composed of atomic sub-components.

Examples

Default

Preview

#	Tema e foco	Instituições	Questões	Desempenho
1	CardiologiaInsuficiência Cardíaca Foco Medbrain	? ? ?	10 respondidas	90% de acertos9 de 10 acertos
2	CardiologiaHipertensão Arterial Sistêmica	? ? ?	10 respondidas	60% de acertos6 de 10 acertos
3	NeurologiaEpilepsia	? ? ?	3 respondidas	Mínimo não atingidoFaltam 3 questões
4	PneumologiaAsma	? ? ?	Não iniciado	Não iniciado

Code

page.jsx


import {
  Ranking,
  RankingBody,
  RankingHeader,
  RankingHeaderCell,
  RankingItem,
  RankingNumber,
  RankingTopicColumn,
  RankingTopicContent,
  RankingSpecialty,
  RankingTopic,
  RankingSuperFocus,
  RankingAssigneesColumn,
  RankingAssigneeGroup,
  RankingAssigneeItem,
  RankingQuestions,
  RankingPerformance,
  RankingButton,
} from "@medway-ui/core";
 
<Ranking>
  <RankingHeader>
    <RankingHeaderCell highlight>#</RankingHeaderCell>
    <RankingHeaderCell>Topic & Focus</RankingHeaderCell>
    <RankingHeaderCell>Institutions</RankingHeaderCell>
    <RankingHeaderCell tooltip="Total questions answered for this focus">
      Questions
    </RankingHeaderCell>
    <RankingHeaderCell tooltip="Accuracy percentage for this focus">
      Performance
    </RankingHeaderCell>
    <RankingHeaderCell>Action</RankingHeaderCell>
  </RankingHeader>
 
  <RankingBody>
    {/* Dominated: started, min reached, >= 80% accuracy */}
    <RankingItem>
      <RankingNumber>1</RankingNumber>
      <RankingTopicColumn>
        <RankingTopicContent>
          <RankingSpecialty>Cardiology</RankingSpecialty>
          <RankingTopic>Heart Failure</RankingTopic>
        </RankingTopicContent>
        <RankingSuperFocus>Medbrain Focus</RankingSuperFocus>
      </RankingTopicColumn>
      <RankingAssigneesColumn>
        <RankingAssigneeGroup>
          <RankingAssigneeItem src="https://github.com/shadcn.png" tooltip="Institution 1" />
          <RankingAssigneeItem src="https://github.com/radix-ui.png" tooltip="Institution 2" />
          <RankingAssigneeItem src="https://github.com/vercel.png" tooltip="Institution 3" />
        </RankingAssigneeGroup>
      </RankingAssigneesColumn>
      <RankingQuestions questions={10} answered={10} />
      <RankingPerformance answered={10} correct={9} minQuestions={5} />
      <RankingButton onClick={() => alert("Action clicked")}>Continue</RankingButton>
    </RankingItem>
 
    {/* Not dominated: started, min reached, < 80% accuracy */}
    <RankingItem>
      <RankingNumber>2</RankingNumber>
      <RankingTopicColumn>
        <RankingTopicContent>
          <RankingSpecialty>Cardiology</RankingSpecialty>
          <RankingTopic>Systemic Arterial Hypertension</RankingTopic>
        </RankingTopicContent>
      </RankingTopicColumn>
      <RankingAssigneesColumn>
        <RankingAssigneeGroup>
          <RankingAssigneeItem src="https://github.com/shadcn.png" tooltip="Institution 1" />
          <RankingAssigneeItem src="https://github.com/radix-ui.png" tooltip="Institution 2" />
          <RankingAssigneeItem src="https://github.com/vercel.png" tooltip="Institution 3" />
        </RankingAssigneeGroup>
      </RankingAssigneesColumn>
      <RankingQuestions questions={10} answered={10} />
      <RankingPerformance answered={10} correct={6} minQuestions={5} />
      <RankingButton onClick={() => alert("Action clicked")}>Continue</RankingButton>
    </RankingItem>
 
    {/* Min not reached: started, answered < minQuestions */}
    <RankingItem>
      <RankingNumber>3</RankingNumber>
      <RankingTopicColumn>
        <RankingTopicContent>
          <RankingSpecialty>Neurology</RankingSpecialty>
          <RankingTopic>Epilepsy</RankingTopic>
        </RankingTopicContent>
      </RankingTopicColumn>
      <RankingAssigneesColumn>
        <RankingAssigneeGroup>
          <RankingAssigneeItem src="https://github.com/shadcn.png" tooltip="Institution 1" />
          <RankingAssigneeItem src="https://github.com/radix-ui.png" tooltip="Institution 2" />
          <RankingAssigneeItem src="https://github.com/vercel.png" tooltip="Institution 3" />
        </RankingAssigneeGroup>
      </RankingAssigneesColumn>
      <RankingQuestions questions={10} answered={3} />
      <RankingPerformance answered={3} correct={2} minQuestions={5} />
      <RankingButton onClick={() => alert("Action clicked")}>Continue</RankingButton>
    </RankingItem>
 
    {/* Not started */}
    <RankingItem>
      <RankingNumber>4</RankingNumber>
      <RankingTopicColumn>
        <RankingTopicContent>
          <RankingSpecialty>Pulmonology</RankingSpecialty>
          <RankingTopic>Asthma</RankingTopic>
        </RankingTopicContent>
      </RankingTopicColumn>
      <RankingAssigneesColumn>
        <RankingAssigneeGroup>
          <RankingAssigneeItem src="https://github.com/shadcn.png" tooltip="Institution 1" />
          <RankingAssigneeItem src="https://github.com/radix-ui.png" tooltip="Institution 2" />
          <RankingAssigneeItem src="https://github.com/vercel.png" tooltip="Institution 3" />
        </RankingAssigneeGroup>
      </RankingAssigneesColumn>
      <RankingQuestions questions={10} answered={0} />
      <RankingPerformance answered={0} correct={0} minQuestions={5} />
      <RankingButton onClick={() => alert("Action clicked")}>Start</RankingButton>
    </RankingItem>
  </RankingBody>
</Ranking>

API

Ranking

Property	Type	Description
children	ReactNode	Content of the ranking table.
className	string	Additional CSS classes.

RankingHeader

Property	Type	Description
children	ReactNode	Header row content.
className	string	Additional CSS classes.

RankingHeaderCell

Property	Type	Description
children	ReactNode	Cell content.
tooltip	string	Optional tooltip text displayed on hover via an info icon.
highlight	boolean	When `true`, wraps the content in a circular badge background. Typically used for the rank number column.

RankingBody

Property	Type	Description
children	ReactNode	Table body content. Should contain `RankingItem` elements.
className	string	Additional CSS classes.

RankingItem

Property	Type	Description
children	ReactNode	Ranking row content. Should contain the column sub-components.
className	string	Additional CSS classes.

RankingNumber

Property	Type	Description
children	ReactNode	The rank number displayed inside a circular badge.

RankingTopicColumn

Property	Type	Description
children	ReactNode	Column content. Typically contains `RankingTopicContent` and optionally `RankingSuperFocus`.

RankingTopicContent

Property	Type	Description
children	ReactNode	Topic text content. Typically contains `RankingSpecialty` and `RankingTopic`.

RankingSpecialty

Property	Type	Description
children	ReactNode	Specialty name displayed above the topic name.

RankingTopic

Property	Type	Description
children	ReactNode	Topic name displayed as the primary label.

RankingSuperFocus

Property	Type	Description
children	ReactNode	Badge label text. Renders a gradient tag indicating a highlighted focus.

RankingAssigneesColumn

Property	Type	Description
children	ReactNode	Column content. Typically contains `RankingAssigneeLabel` and/or `RankingAssigneeGroup`.

RankingAssigneeLabel

Property	Type	Description
children	ReactNode	Optional label text rendered above the assignee avatars.

RankingAssigneeGroup

Property	Type	Description
children	ReactNode	Group of avatar items. Should contain `RankingAssigneeItem` elements.

RankingAssigneeItem

Property	Type	Description
src	string	URL of the avatar image.
alt	string	Alt text for the avatar image.
fallback	string	Fallback text displayed when the image fails to load. Defaults to `"?"`.
tooltip	ReactNode	Optional tooltip content displayed on hover over the avatar.

RankingPriority

Property	Type	Description
children	ReactNode	Priority label rendered inside a soft tag.
icon	ReactElement	Optional icon displayed inside the priority tag.

RankingQuestions

Property	Type	Description
questions	number	Total number of questions available. Used to compute the progress bar fill.
answered	number	Number of questions answered so far. When `answered === 0`, displays a “Not started” state instead of a progress bar.

RankingPerformance

Property	Type	Description
answered	number	Number of questions answered. When `answered === 0`, displays a “Not started” state.
correct	number	Number of correct answers. Used alongside `answered` to display the accuracy subtitle (e.g. `"9 of 10 correct"`).
minQuestions	number	Minimum number of questions required to evaluate performance. When `answered < minQuestions`, displays a “Minimum not reached” warning state with the remaining question count.

RankingButton

Property	Type	Description
children	ReactNode	Button label text.
onClick	() => void	Click handler. Triggers when the user clicks the action button.