Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { Flex, Grid, LinkBox, Stack } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { Details } from "./Details";
import { Heading } from "./Heading";
import { Highlight } from "./Highlight";
import { Languages } from "./Languages";
import { Tags } from "./Tags";
import testIds from "./testIds";
export const WideCard: FunctionComponent = () => {
return (
<LinkBox
_hover={{
"> article": {
bg: "hoverPrimary",
},
}}
>
<Grid
as="article"
bg="bgSecondary"
border="base"
borderRadius="sm"
boxShadow="base"
color="textPrimary"
data-testid={testIds.wideContainer}
h="full"
minH="12.5rem"
templateColumns={{ base: "1fr", lg: "1fr 14rem" }}
w="full"
>
{/* Top / Left side of card */}
<Flex
direction="column"
justify="space-between"
overflow="hidden"
p={5}
sx={{ gap: "0.5rem" }}
>
<Stack spacing={3}>
<Heading />
</Stack>
<Flex align="center" sx={{ gap: "0.5rem" }} wrap="wrap">
<Tags />
</Flex>
</Flex>
{/* Bottom / Right side of card */}
<Flex
align={{ base: "end", lg: "initial" }}
borderLeft={{ lg: "base" }}
borderTop={{ base: "base", lg: "none" }}
direction={{ base: "row", lg: "column" }}
justify="space-between"
p={5}
sx={{ gap: "0.5rem" }}
>
<Stack spacing={1}>
<Highlight />
<Stack spacing={1}>
<Details />
</Stack>
</Stack>
<Stack data-testid={testIds.languages} direction="row" spacing={2}>
<Languages />
</Stack>
</Flex>
</Grid>
</LinkBox>
);
};
|