mirror of
https://github.com/fleetdm/fleet
synced 2026-05-22 00:18:27 +00:00
0f02fa012e
I notices we were reusing styles alot for the card like container UI so I created a reusable `Card` component The component is used like this: ```tsx // default card is white background <Card> <p>whatever JSX you want</p> </Card> <Card color="gray"> <p>whatever JSX you want</p> </Card> <Card color="yellow"> <p>whatever JSX you want</p> </Card> <Card color="purple"> <p>whatever JSX you want</p> </Card> ``` **white**  **gray**  **yellow**  **purple**  - [x] Manual QA for all new/changed functionality
25 lines
651 B
TypeScript
25 lines
651 B
TypeScript
import React from "react";
|
|
import classnames from "classnames";
|
|
|
|
const baseClass = "card";
|
|
|
|
type CardColors = "white" | "gray" | "purple" | "yellow";
|
|
|
|
interface ICardProps {
|
|
children?: React.ReactNode;
|
|
/** defaults to white */
|
|
color?: CardColors;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* A generic card component that will be used to render content within a card with a border and
|
|
* and selected background color.
|
|
*/
|
|
const Card = ({ children, color = "white", className }: ICardProps) => {
|
|
const classNames = classnames(baseClass, `${baseClass}__${color}`, className);
|
|
|
|
return <div className={classNames}>{children}</div>;
|
|
};
|
|
|
|
export default Card;
|