CardWeek

A flexible card component designed for displaying weekly content.

Examples

Basic

A simple card without tag and progress circle.

Preview

Intensivo R+ 2025

Semana 1

Clínica médica

Estimado 1h

With Tag

Use the tag prop on CardWeekBreadcrumb to display a tag. You can also use the tagIcon prop to add an icon to the tag.

Preview

Prioritário

Última revisão há 0 dias

Semana 1

Clínica médica0 vezes revisado

Estimado 2h

With Progress Circle

Use CardWeekProgressCircle to display a circular progress indicator in the header.

Preview

Prioritário

Última revisão há 0 dias

Semana 1

75%

na última revisão

Clínica médica3 vezes revisado

Estimado 5h

Status

Use the done, postponed, or skipped props on CardWeek to indicate the card’s completion status. The title and description will have a strikethrough effect and the status indicator will change accordingly.

Preview

Prioritário

Última revisão há 0 dias

Semana 1 - Feito

Clínica médica5 vezes revisado

Estimado 0h

Feito

Prioritário

Última revisão há 3 dias

Semana 2 - Adiado

Clínica médica2 vezes revisado

Estimado 0h

Adiado

Prioritário

Última revisão há 7 dias

Semana 3 - Pulado

Clínica médica1 vezes revisado

Estimado 0h

Pulado

Code

page.tsx


import {
  CardWeek,
  CardWeekBreadcrumb,
  CardWeekContainer,
  CardWeekHeader,
  CardWeekTitle,
  CardWeekTags,
  CardWeekDescription,
  CardWeekFooter,
  CardWeekContent,
  CardWeekText,
  CardWeekStatus,
  CardWeekProgress,
  CardWeekActions,
  BreadcrumbItem,
  BreadcrumbPage,
  BreadcrumbSeparator,
  Badge,
  Button,
  Tag,
} from "@medway-ui/core";
import { BookOpen, ArrowUpRightMd, MedicalClinic, IndexPriority } from "@medway-ui/icons";
 
{/* Done status */}
<CardWeek done>
  <CardWeekBreadcrumb tag="Prioritário" tagIcon={<IndexPriority size={16} />}>
    <BreadcrumbItem>
      <BreadcrumbPage className="text-xs">Aprender</BreadcrumbPage>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem icon={<BookOpen size={16} />}>
      <BreadcrumbPage className="text-xs">Introdução</BreadcrumbPage>
    </BreadcrumbItem>
  </CardWeekBreadcrumb>
  <CardWeekContainer>
    <CardWeekHeader>
     <div className="flex flex-col gap-1">
      <CardWeekDescription>Última revisão há 0 dias</CardWeekDescription>
      <CardWeekTitle>Semana 1 - Feito</CardWeekTitle>
     </div>
    </CardWeekHeader>
    <CardWeekTags>
      <Tag variant="cm-soft" icon={<MedicalClinic size={16} />}>Clínica médica</Tag>
      <Tag variant="success-soft"><Badge size="sm">5</Badge> vezes revisado</Tag>
    </CardWeekTags>
    <CardWeekFooter>
      <CardWeekContent>
        <div className="flex items-center gap-2">
          <CardWeekText isTime>Estimado <span className="font-semibold">0h</span></CardWeekText>
          <CardWeekStatus />
        </div>
      </CardWeekContent>
      <CardWeekProgress value={100} />
      <CardWeekActions>
        <Button variant="regular-soft" size="sm">Ver histórico</Button>
        <Button variant="regular-soft" size="sm">Marcar como novo</Button>
        <Button size="sm" iconRight={<ArrowUpRightMd />}>Revisar</Button>
      </CardWeekActions>
    </CardWeekFooter>
  </CardWeekContainer>
</CardWeek>
 
{/* Postponed status */}
<CardWeek postponed>
  <CardWeekBreadcrumb tag="Prioritário" tagIcon={<IndexPriority size={16} />}>
    <BreadcrumbItem>
      <BreadcrumbPage className="text-xs">Aprender</BreadcrumbPage>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem icon={<BookOpen size={16} />}>
      <BreadcrumbPage className="text-xs">Introdução</BreadcrumbPage>
    </BreadcrumbItem>
  </CardWeekBreadcrumb>
  <CardWeekContainer>
    <CardWeekHeader>
     <div className="flex flex-col gap-1">
      <CardWeekDescription>Última revisão há 3 dias</CardWeekDescription>
      <CardWeekTitle>Semana 2 - Adiado</CardWeekTitle>
     </div>
    </CardWeekHeader>
    <CardWeekTags>
      <Tag variant="cm-soft" icon={<MedicalClinic size={16} />}>Clínica médica</Tag>
      <Tag variant="success-soft"><Badge size="sm">2</Badge> vezes revisado</Tag>
    </CardWeekTags>
    <CardWeekFooter>
      <CardWeekContent>
        <div className="flex items-center gap-2">
          <CardWeekText isTime>Estimado <span className="font-semibold">0h</span></CardWeekText>
          <CardWeekStatus />
        </div>
      </CardWeekContent>
      <CardWeekProgress value={50} />
      <CardWeekActions>
        <Button variant="regular-soft" size="sm">Ver histórico</Button>
        <Button variant="regular-soft" size="sm">Marcar como novo</Button>
        <Button size="sm" iconRight={<ArrowUpRightMd />}>Revisar</Button>
      </CardWeekActions>
    </CardWeekFooter>
  </CardWeekContainer>
</CardWeek>
 
{/* Skipped status */}
<CardWeek skipped>
  <CardWeekBreadcrumb tag="Prioritário" tagIcon={<IndexPriority size={16} />}>
    <BreadcrumbItem>
      <BreadcrumbPage className="text-xs">Aprender</BreadcrumbPage>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem icon={<BookOpen size={16} />}>
      <BreadcrumbPage className="text-xs">Introdução</BreadcrumbPage>
    </BreadcrumbItem>
  </CardWeekBreadcrumb>
  <CardWeekContainer>
    <CardWeekHeader>
     <div className="flex flex-col gap-1">
      <CardWeekDescription>Última revisão há 7 dias</CardWeekDescription>
      <CardWeekTitle>Semana 3 - Pulado</CardWeekTitle>
     </div>
    </CardWeekHeader>
    <CardWeekTags>
      <Tag variant="cm-soft" icon={<MedicalClinic size={16} />}>Clínica médica</Tag>
      <Tag variant="success-soft"><Badge size="sm">1</Badge> vezes revisado</Tag>
    </CardWeekTags>
    <CardWeekFooter>
      <CardWeekContent>
        <div className="flex items-center gap-2">
          <CardWeekText isTime>Estimado <span className="font-semibold">0h</span></CardWeekText>
          <CardWeekStatus />
        </div>
      </CardWeekContent>
      <CardWeekProgress value={25} />
      <CardWeekActions>
        <Button variant="regular-soft" size="sm">Ver histórico</Button>
        <Button variant="regular-soft" size="sm">Marcar como novo</Button>
        <Button size="sm" iconRight={<ArrowUpRightMd />}>Revisar</Button>
      </CardWeekActions>
    </CardWeekFooter>
  </CardWeekContainer>
</CardWeek>

API

CardWeek Structure

Component	Description	Usage
CardWeek	Root container with border and rounded corners	Wraps all card content
CardWeekBreadcrumb	Breadcrumb container with muted background	Wraps Breadcrumb components (BreadcrumbItem, BreadcrumbSeparator, etc.)
CardWeekContainer	Content container with padding and gap	Wraps Header, Content, Tags, and Footer with consistent spacing
CardWeekHeader	Header section with flex layout for title, description and progress	Contains title, description and optional progress circle
CardWeekTitle	Title element with semibold font weight (strikethrough when done/postponed/skipped)	Primary heading of the card
CardWeekDescription	Muted description text (muted when done/postponed/skipped)	Secondary text above the title
CardWeekTags	Container for tag elements with flex wrap	Wraps Tag components
CardWeekProgress	Linear progress bar	Shows completion progress in footer between status and actions
CardWeekProgressCircle	Circular progress indicator	Shows completion percentage in header
CardWeekContent	Container for status elements with flex layout	Wraps CardWeekText and CardWeekStatus
CardWeekText	Text element with optional time icon	Displays text content, with time icon when isTime prop is true
CardWeekStatus	Status badge that shows completion state	Automatically displays “Feito”, “Adiado”, or “Pulado” based on card state
CardWeekFooter	Footer section with auto margin top	Contains content, progress and actions
CardWeekActions	Action container with top border (primary border when done)	Buttons or interactive elements

CardWeek

Property	Type	Default	Description
done	boolean	false	Marks the card as completed. Applies strikethrough to title and shows “Feito” status.
postponed	boolean	false	Marks the card as postponed. Applies strikethrough to title and shows “Adiado” status.
skipped	boolean	false	Marks the card as skipped. Applies strikethrough to title and shows “Pulado” status.
className	string	-	Additional CSS classes for the card container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekBreadcrumb

Property	Type	Default	Description
tag	string	-	Optional tag text displayed at the end of the breadcrumb.
tagIcon	React.ReactElement	-	Optional icon to display inside the tag.
children	React.ReactNode	-	Breadcrumb components (BreadcrumbItem, BreadcrumbSeparator, BreadcrumbPage, etc.).
className	string	-	Additional CSS classes for the breadcrumb container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekContainer

Property	Type	Default	Description
children	React.ReactNode	-	Card content (Header, Content, Tags, Footer components).
className	string	-	Additional CSS classes for the container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekHeader

Property	Type	Default	Description
children	React.ReactNode	-	Header content (title, description, progress).
className	string	-	Additional CSS classes. Use `border-b` to add bottom border with automatic padding.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekTitle

Property	Type	Default	Description
children	React.ReactNode	-	Title text content.
className	string	-	Additional CSS classes for the title element.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekDescription

Property	Type	Default	Description
children	React.ReactNode	-	Description text content.
className	string	-	Additional CSS classes for the description element.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekTags

Property	Type	Default	Description
children	React.ReactNode	-	Tag components to be displayed.
className	string	-	Additional CSS classes for the tags container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekProgress

Linear progress bar displayed in the footer between status and actions.

Property	Type	Default	Description
value	number	0	Progress percentage value (0-100).
className	string	-	Additional CSS classes for the progress container.
…props	ProgressProps	-	All Progress component props are supported.

CardWeekProgressCircle

Circular progress indicator displayed in the header.

Property	Type	Default	Description
value	number	0	Progress percentage value (0-100).
label	string	-	Optional label text below the percentage.
size	number	104	Size of the progress circle in pixels.
strokeWidth	number	2	Width of the progress stroke.
indicatorClassName	string	-	Additional CSS classes for the progress indicator.
trackClassName	string	-	Additional CSS classes for the progress track.
valueClassName	string	-	Additional CSS classes for the value text.
labelClassName	string	-	Additional CSS classes for the label text.
className	string	-	Additional CSS classes for the progress container.
…props	ProgressCircleProps	-	All ProgressCircle component props are supported.

CardWeekContent

Container for text and status elements in the footer.

Property	Type	Default	Description
children	React.ReactNode	-	Content to be displayed (CardWeekText and CardWeekStatus).
className	string	-	Additional CSS classes for the content container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekFooter

Property	Type	Default	Description
children	React.ReactNode	-	Footer content (status, actions).
className	string	-	Additional CSS classes for the footer.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekText

Text element with optional time icon.

Property	Type	Default	Description
isTime	boolean	false	When true, displays a time icon before the content and applies secondary foreground color.
children	React.ReactNode	-	Text content to be displayed.
className	string	-	Additional CSS classes for the text container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardWeekStatus

Status badge that automatically displays the completion state based on the parent CardWeek props. Returns null if no status is set.

Property	Type	Default	Description
className	string	-	Additional CSS classes for the status badge.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

Status behavior:

When done is true on CardWeek: Shows “Feito” with green badge
When postponed is true on CardWeek: Shows “Adiado” with yellow badge
When skipped is true on CardWeek: Shows “Pulado” with yellow badge
When none are set: Returns null (renders nothing)

CardWeekActions

Property	Type	Default	Description
children	React.ReactNode	-	Action buttons or interactive elements.
className	string	-	Additional CSS classes for the actions container.
…props	React.ComponentProps<“div”>	-	All native div props are supported.