vega-frontend-monorepo/apps/trading/components/competitions/competitions-cta.tsx
Matthew Russell e52ae97233
feat(trading): competitions (#5621)
Co-authored-by: asiaznik <artur@vegaprotocol.io>
Co-authored-by: Ben <ben@vega.xyz>
2024-01-31 14:21:29 +00:00

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>
);
};