mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-09 05:26:24 +09:00
Oleg Isonen
e77a8f5180
## Description - improved dashboard resource items - fixed react warnings ## Code Review - [ ] hi @TrySound , I need you to do - conceptual review (architecture, feature-correctness) ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory
65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import {
|
|
Flex,
|
|
theme,
|
|
Box,
|
|
Grid,
|
|
styled,
|
|
css,
|
|
Slot,
|
|
type SlotProps,
|
|
} from "@webstudio-is/design-system";
|
|
import { forwardRef, type ComponentProps } from "react";
|
|
|
|
const cardStyle = css({
|
|
display: "flex",
|
|
padding: 0,
|
|
height: "100%",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
flexShrink: 0,
|
|
overflow: "hidden",
|
|
aspectRatio: "8 / 7",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: theme.colors.borderMain,
|
|
borderRadius: theme.borderRadius[4],
|
|
background: theme.colors.brandBackgroundProjectCardFront,
|
|
"&:hover, &:focus-within": {
|
|
boxShadow: theme.shadows.brandElevationBig,
|
|
},
|
|
"&:focus-visible": {
|
|
outline: `2px solid ${theme.colors.borderFocus}`,
|
|
outlineOffset: 1,
|
|
},
|
|
});
|
|
|
|
type CardProps = ComponentProps<"div"> & {
|
|
asChild?: boolean;
|
|
} & SlotProps;
|
|
|
|
export const Card = forwardRef<HTMLDivElement, CardProps>(
|
|
({ asChild, ...props }, ref) => {
|
|
const Component = asChild ? Slot : Box;
|
|
return <Component {...props} className={cardStyle()} ref={ref} />;
|
|
}
|
|
);
|
|
Card.displayName = "Card";
|
|
|
|
export const CardContent = styled(Grid, {
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
minWidth: "100%",
|
|
height: "100%",
|
|
});
|
|
|
|
export const CardFooter = styled(Flex, {
|
|
justifyContent: "space-between",
|
|
flexShrink: 0,
|
|
alignSelf: "stretch",
|
|
flexGap: theme.spacing[3],
|
|
background: theme.colors.brandBackgroundProjectCardTextArea,
|
|
height: theme.spacing[17],
|
|
py: theme.spacing[5],
|
|
px: theme.spacing[7],
|
|
});
|