42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import Text from '@views/components/common/Text/Text';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* A type that represents the flags that a course can have.
|
|
*/
|
|
export type Flag = 'WR' | 'QR' | 'GC' | 'CD' | 'E' | 'II';
|
|
export const flagMap = {
|
|
Writing: 'WR',
|
|
'Quantitative Reasoning': 'QR',
|
|
'Global Cultures': 'GC',
|
|
'Cultural Diversity': 'CD',
|
|
Ethics: 'E',
|
|
'Independent Inquiry': 'II',
|
|
} as const satisfies Record<string, Flag>;
|
|
|
|
interface Props {
|
|
label: Flag;
|
|
}
|
|
|
|
/**
|
|
* A reusable chip component that follows the design system of the extension.
|
|
* @returns
|
|
*/
|
|
export function Chip({ label }: React.PropsWithChildren<Props>): JSX.Element {
|
|
const longFlagName = Object.entries(flagMap).find(([full, short]) => short === label)?.[0] ?? label;
|
|
|
|
return (
|
|
<Text
|
|
as='div'
|
|
variant='h4'
|
|
className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1.5 py-0.5'
|
|
style={{
|
|
backgroundColor: '#FFD600',
|
|
}}
|
|
title={`${longFlagName} flag`}
|
|
>
|
|
{label}
|
|
</Text>
|
|
);
|
|
}
|