UI Breadcrumb changes

Author: coder13

src/components/ActivityRow/ActivityRow.tsx

@@ -6,6 +6,7 @@ import { Stage } from '@/extensions/org.cubingusa.natshelper.v1/types';
 import { useNow } from '@/hooks/useNow';
 import { activityCodeToName } from '@/lib/activityCodes';
 import { formatTimeRange } from '@/lib/time';
+import { Pill } from '../Pill';
 
 interface ActivityRowProps {
   activity: Activity;
@@ -38,14 +39,14 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti
       to={`/competitions/${competitionId}/activities/${activity.id}`}>
       <span>{activityName}</span>
       <span className="text-xs md:text-sm font-light flex justify-between">
-        {showRoom && (
-          <span
+        {showRoom && stage && (
+          <Pill
             className="mr-2 px-1 rounded"
             style={{
-              backgroundColor: `${stage?.color}70`,
+              backgroundColor: `${stage.color}70`,
             }}>
-            {stage?.name}
-          </span>
+            {stage.name}
+          </Pill>
         )}
         <span>{formatTimeRange(activity.startTime, activity.endTime, 5, timeZone)}</span>
       </span>

src/components/AssignmentLabel/AssignmentLabel.test.tsx

@@ -1,9 +1,6 @@
 import { AssignmentCode } from '@wca/helpers';
 import { useTranslation } from 'react-i18next';
-
-const Container = ({ children, className }: React.PropsWithChildren<{ className?: string }>) => (
-  <span className={`${className} px-[6px] py-[4px] rounded-md bg-blue-100`}>{children}</span>
-);
+import { Pill } from '../Pill';
 
 interface AssignmentLabelProps {
   assignmentCode: AssignmentCode;
@@ -14,11 +11,11 @@ export function AssignmentLabel({ assignmentCode }: AssignmentLabelProps) {
 
   if (assignmentCode.match(/judge/i)) {
     return (
-      <Container className="bg-blue-200">
+      <Pill className="bg-blue-200">
         {t('common.assignments.staff-judge.noun', {
           defaultValue: assignmentCode.replace('staff-', ''),
         })}
-      </Container>
+      </Pill>
     );
   }
 
@@ -28,20 +25,20 @@ export function AssignmentLabel({ assignmentCode }: AssignmentLabelProps) {
 
   switch (assignmentCode) {
     case 'competitor':
-      return <Container className="bg-green-200">{name}</Container>;
+      return <Pill className="bg-green-200">{name}</Pill>;
     case 'staff-scrambler':
-      return <Container className="bg-yellow-200">{name}</Container>;
+      return <Pill className="bg-yellow-200">{name}</Pill>;
     case 'staff-runner':
-      return <Container className="bg-orange-200">{name}</Container>;
+      return <Pill className="bg-orange-200">{name}</Pill>;
     case 'staff-dataentry':
-      return <Container className="bg-cyan-200">{name}</Container>;
+      return <Pill className="bg-cyan-200">{name}</Pill>;
     case 'staff-announcer':
-      return <Container className="bg-violet-200">{name}</Container>;
+      return <Pill className="bg-violet-200">{name}</Pill>;
     case 'staff-delegate':
-      return <Container className="bg-purple-200">{name}</Container>;
+      return <Pill className="bg-purple-200">{name}</Pill>;
     case 'staff-stagelead':
-      return <Container className="bg-purple-800">{name}</Container>;
+      return <Pill className="bg-purple-800">{name}</Pill>;
     default:
-      return <Container>{name}</Container>;
+      return <Pill className="bg-blue-100">{name}</Pill>;
   }
 }

src/components/AssignmentLabel/AssignmentLabel.tsx

@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import { Pill, PillProps } from '../Pill';
+
+export type Breadcrumb =
+  | {
+      label: string;
+      href: string;
+      pillProps?: PillProps;
+    }
+  | {
+      label: string;
+    };
+
+export interface BreadcrumbsProps {
+  breadcrumbs: Breadcrumb[];
+}
+
+export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
+  return (
+    <div className="flex items-center space-x-1">
+      {breadcrumbs.map(({ label, ...breadcrumb }, index) => (
+        <Fragment key={label}>
+          {index > 0 && <span className="text-gray-500 dark:text-gray-400">·</span>}
+          {'href' in breadcrumb ? (
+            <Link to={breadcrumb.href}>
+              <Pill
+                {...breadcrumb.pillProps}
+                className={classNames(
+                  'min-h-[40px] hover:ring-2',
+                  breadcrumb.pillProps?.className,
+                )}>
+                {label}
+              </Pill>
+            </Link>
+          ) : (
+            <span key={label}>{label}</span>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+};

src/components/AssignmentLabel/__snapshots__/AssignmentLabel.test.tsx.snap

@@ -12,7 +12,7 @@ export const Container = ({ children, className, fullWidth = false }: ContainerP
       className={classNames(
         'flex flex-col w-full h-max',
         {
-          'lg:w-1/2 md:w-2/3': !fullWidth,
+          'max-w-screen-md': !fullWidth,
         },
         className,
       )}>

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -27,8 +27,8 @@ export function CutoffTimeLimitPanel({
 
   return (
     <div className={classNames('flex w-full', className)}>
-      <div className="flex flex-col space-y-1 flex-1">
-        <div className="divide-x-2 divide-gray-100">
+      <div className="flex flex-col space-y-1 flex-1 -mx-2">
+        <div className="divide-x-2 divide-gray-100 flex">
           {cutoff && (
             <span className="px-2">
               {t('common.wca.cutoff')}:{' '}

src/components/Container/Container.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+
+export type PillProps = React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>;
+
+export const Pill = ({ className, ...props }: PillProps) => {
+  return (
+    <span
+      className={classNames(
+        `inline-flex justify-center items-center px-1.5 py-1 ring-1 ring-inset ring-gray-100 font-medium rounded-md bg-gray-100 text-gray-800 shadow-sm`,
+        className,
+      )}
+      {...props}
+    />
+  );
+};

src/components/CutoffTimeLimitPanel/CutoffTimeLimitPanel.tsx

@@ -0,0 +1 @@
+export * from './Pill';

src/components/Pill/Pill.tsx

@@ -5,8 +5,8 @@ import { AssignmentCodeCell } from '@/components/AssignmentCodeCell';
 import { useNow } from '@/hooks/useNow/useNow';
 import { useOngoingActivities } from '@/hooks/useOngoingActivities';
 import { getAllChildActivities, getAllRoundActivities, getRooms } from '@/lib/activities';
+import { GroupAssignmentCodeRank } from '@/lib/constants';
 import { formatTime } from '@/lib/time';
-import { GroupAssignmentCodeRank } from '@/pages/Competition/ByGroup/Group';
 import { useWCIF } from '@/providers/WCIFProvider';
 
 const useCommon = (competitionId: string) => {