Derek Chen
ba2bc60add
* feat: initial attempt at hover text * feat: fixgin it * fix: heading to master real quick * feat: tooltip prop added * feat: tooltip now reads from the map instead of just label. Think we're done! * Update Chip.tsx
40 lines
1.0 KiB
TypeScript
40 lines
1.0 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 in the United States': '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 {
|
|
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={Object.keys(flagMap).find(key => flagMap[key] === label)}
|
|
>
|
|
{label}
|
|
</Text>
|
|
);
|
|
}
|