feat: added updates card

package.json

@@ -39,6 +39,7 @@
 		"@stylexjs/stylex": "^0.3.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-grid-system": "^8.1.9",
 		"wouter": "^2.12.1"
 	},
 	"devDependencies": {

src/components/UpdatesCard/UpdatesCard.styles.ts

@@ -0,0 +1,22 @@
+import * as stylex from '@stylexjs/stylex';
+import { fontSizes, spacing } from '../../token.stylex.ts';
+
+export const styles = stylex.create({
+	base: {
+		padding: spacing['4'],
+	},
+	content: {
+		flexDirection: 'column',
+		alignItems: 'flex-start',
+		gap: spacing['4'],
+	},
+	title: {
+		fontSize: fontSizes.h5,
+		fontWeight: 400,
+	},
+	image: {
+		width: '100%',
+		height: 200,
+		objectFit: 'contain',
+	},
+});

src/components/UpdatesCard/UpdatesCard.tsx

@@ -0,0 +1,38 @@
+import { Button, Card } from '../ui';
+import { styles } from './UpdatesCard.styles.ts';
+import * as stylex from '@stylexjs/stylex';
+import { Col, Row } from 'react-grid-system';
+import { Flex } from '../ui/Flex';
+import { ArrowRightIcon } from '@radix-ui/react-icons';
+
+export type UpdatesCardProps = {
+	sx?: stylex.StyleXStyles;
+};
+
+export const UpdatesCard = ({ sx }: UpdatesCardProps) => {
+	return (
+		<Card title="Latest updates" {...stylex.props(styles.base, sx)}>
+			<Row align="center">
+				<Col sm={7}>
+					<Flex sx={styles.content}>
+						<p {...stylex.props(styles.title)}>Connecting cards</p>
+						<p>
+							Now all accounts have the function of connecting cards of other
+							banks. Managing your finances just got easier
+						</p>
+						<Button rightSection={<ArrowRightIcon />} variant="outline">
+							Read more
+						</Button>
+					</Flex>
+				</Col>
+				<Col sm={5}>
+					<img
+						src="/img/updates.png"
+						alt="images"
+						{...stylex.props(styles.image)}
+					/>
+				</Col>
+			</Row>
+		</Card>
+	);
+};

src/components/UpdatesCard/index.ts

@@ -0,0 +1 @@
+export { UpdatesCard, type UpdatesCardProps } from './UpdatesCard.tsx';

src/components/Button/Button.styles.ts → src/components/ui/Button/Button.styles.ts

@@ -1,14 +1,17 @@
 import * as stylex from '@stylexjs/stylex';
-import { radius, tokens } from '../../token.stylex.ts';
+import { radius, spacing, tokens } from '../../../token.stylex.ts';
 
 const DARK = '@media (prefers-color-scheme: dark)';
 
 export const styles = stylex.create({
 	base: {
-		border: '2px solid transparent',
-		fontWeight: 500,
+		display: 'flex',
+		alignItems: 'center',
+		gap: spacing['2'],
 		color: tokens.primaryText,
+		border: '2px solid transparent',
 		borderRadius: radius['7'],
+		fontWeight: 500,
 		textDecoration: 'none',
 
 		':hover': {

src/components/Button/Button.tsx → src/components/ui/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { styles as buttonStyles } from './Button.styles.ts';
-import { ISizes } from '../../types';
+import { styles } from './Button.styles.ts';
+import { ISizes } from '../../../types';
 
 export type ButtonVariants =
 	| 'subtle'
@@ -19,7 +19,7 @@ export type ButtonProps = {
 	loading?: boolean;
 	disabled?: boolean;
 	w?: stylex.StyleXStyles<{ width?: string | number }>;
-	styles?: stylex.StyleXStyles<{ textTransform?: string }>;
+	sx?: stylex.StyleXStyles<{ textTransform?: string }>;
 } & ComponentProps<'a' | 'button'>;
 
 export const Button = (props: ButtonProps) => {
@@ -32,19 +32,19 @@ export const Button = (props: ButtonProps) => {
 		leftSection,
 		rightSection,
 		w,
-		styles,
+		sx,
 		...others
 	} = props;
 
 	return href ? (
 		<a
 			href={href}
 			{...stylex.props(
-				buttonStyles.base,
-				buttonStyles[variant],
-				size && buttonStyles[size],
-				buttonStyles.w(w),
-				styles
+				styles.base,
+				styles[variant],
+				size && styles[size],
+				styles.w(w),
+				sx
 			)}
 		>
 			{leftSection}
@@ -54,11 +54,11 @@ export const Button = (props: ButtonProps) => {
 	) : (
 		<button
 			{...stylex.props(
-				buttonStyles.base,
-				buttonStyles[variant],
-				size && buttonStyles[size],
-				buttonStyles.w(w),
-				styles
+				styles.base,
+				styles[variant],
+				size && styles[size],
+				styles.w(w),
+				sx
 			)}
 		>
 			{leftSection}

src/components/ui/Card/Card.styles.ts

@@ -0,0 +1,47 @@
+import * as stylex from '@stylexjs/stylex';
+import {
+	fontSizes,
+	radius,
+	shadows,
+	spacing,
+	tokens,
+} from '../../../token.stylex.ts';
+
+export const styles = stylex.create({
+	base: {
+		backgroundColor: tokens.grayBg,
+		color: tokens.grayText,
+		padding: spacing['4'],
+		borderRadius: radius['4'],
+	},
+	header: {
+		display: 'flex',
+		justifyContent: 'space-between',
+	},
+	text: {},
+	title: {
+		fontSize: fontSizes.h4,
+		margin: `0 0 ${spacing['3']} 0`,
+	},
+	subtitle: {
+		fontSize: fontSizes.h6,
+		margin: 0,
+	},
+	body: {},
+	footer: {},
+	w: (width) => ({
+		width,
+	}),
+	shadowsm: {
+		boxShadow: shadows.sm,
+	},
+	shadowmd: {
+		boxShadow: shadows.md,
+	},
+	shadowlg: {
+		boxShadow: shadows.lg,
+	},
+	border: {
+		border: `1px solid ${tokens.grayBorder}`,
+	},
+});

src/components/Card/Card.tsx → src/components/ui/Card/Card.tsx

@@ -1,34 +1,53 @@
 import * as stylex from '@stylexjs/stylex';
 import { ComponentProps, ReactNode } from 'react';
 import { styles } from './Card.styles.ts';
+import { IShadows } from '../../../types';
 
 export type CardProps = {
 	children: ReactNode;
 	w?: stylex.StyleXStyles<{ width?: string | number }>;
 	bg?: stylex.StyleXStyles<{ backgroundColo?: string }>;
-	header?: string;
 	title?: string;
 	subtitle?: string;
 	footer?: ReactNode;
 	extra?: ReactNode;
 	img?: string;
+	shadow?: IShadows;
+	border?: boolean;
+	sx?: stylex.StyleXStyles;
 } & ComponentProps<'article'>;
 
 export const Card = (props: CardProps) => {
-	const { children, bg, w, title, header, footer, extra, subtitle, ...others } =
-		props;
+	const {
+		children,
+		bg,
+		w,
+		title,
+		footer,
+		extra,
+		subtitle,
+		border,
+		shadow,
+		sx,
+		...others
+	} = props;
 
 	return (
-		<article {...others} {...stylex.props(styles.base, styles.w(w))}>
+		<article
+			{...others}
+			{...stylex.props(
+				styles.base,
+				styles.w(w),
+				shadow && styles[`shadow${shadow}`],
+				border && styles.border,
+				sx
+			)}
+		>
 			<div {...stylex.props(styles.header)}>
-				{header ? (
-					header
-				) : (
-					<div>
-						<h5 {...stylex.props(styles.title)}>{title}</h5>
-						<h6 {...stylex.props(styles.subtitle)}>{subtitle}</h6>
-					</div>
-				)}
+				<div>
+					<h5 {...stylex.props(styles.title)}>{title}</h5>
+					<h6 {...stylex.props(styles.subtitle)}>{subtitle}</h6>
+				</div>
 				<div>{extra}</div>
 			</div>
 			{children}

src/components/Container/Container.styles.ts → src/components/ui/Container/Container.styles.ts

@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { container, spacing } from '../../token.stylex.ts';
+import { container, spacing } from '../../../token.stylex.ts';
 
 export const styles = stylex.create({
 	base: {