42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
|
import { Box } from './box';
|
||
|
|
import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
|
||
|
|
import { DudeBadge } from './graphics/dude-badge';
|
||
|
|
|
||
|
|
export const CompetitionsActionsContainer = ({
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
children:
|
||
|
|
| ReactElement<typeof CompetitionsAction>
|
||
|
|
| Iterable<ReactElement<typeof CompetitionsAction>>;
|
||
|
|
}) => (
|
||
|
|
<div
|
||
|
|
className="grid grid-cols-1 md:grid-cols-3 grid-rows-4'
|
||
|
|
gap-6 mb-12"
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
export const CompetitionsAction = ({
|
||
|
|
variant,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
actionElement,
|
||
|
|
}: {
|
||
|
|
variant: ComponentProps<typeof DudeBadge>['variant'];
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
actionElement: ReactNode;
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<Box className="grid md:grid-rows-[subgrid] gap-6 row-span-4 text-center">
|
||
|
|
<div className="flex justify-center">
|
||
|
|
<DudeBadge variant={variant} />
|
||
|
|
</div>
|
||
|
|
<h2 className="text-2xl">{title}</h2>
|
||
|
|
{description && <p className="text-muted">{description}</p>}
|
||
|
|
<div className="flex justify-center">{actionElement}</div>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|