feat(app): add new wip

BrahimS · Sep 30, 2024 · 8875449 · 8875449
1 parent 1e548ae
commit 8875449
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 6 deletions.
diff --git a/apps/uikit/src/app/components/Layout/index.tsx b/apps/uikit/src/app/components/Layout/index.tsx
@@ -8,7 +8,7 @@ import {
 	MainContent,
 } from '@react-monorepo/shared-ui';
 
-export const Layout = () => {
+export const Layout = (): React.ReactNode => {
 	return (
 		<AppWrapper>
 			<Header>

diff --git a/apps/uikit/src/app/pages/Styleguide.tsx b/apps/uikit/src/app/pages/Styleguide.tsx
@@ -1,7 +1,28 @@
 import React from 'react';
+import { BoxElement } from '@react-monorepo/shared-ui';
 
 const Styleguide = (): React.ReactNode => {
-	return <div>styleguide</div>;
+	return (
+		<BoxElement
+			style={{
+				display: 'flex',
+				flexDirection: 'row',
+				justifyContent: 'space-between',
+				justifyItems: 'space-between',
+				alignItems: 'flex-start',
+				flexWrap: 'wrap',
+				width: '33%',
+				height: '33%',
+			}}
+		>
+			<div>
+				<BoxElement style={{ backgroundColor: 'red' }} $isBig={false} />
+				<BoxElement style={{ backgroundColor: 'green' }} />
+				<BoxElement style={{ backgroundColor: 'pink' }} />
+				<BoxElement style={{ backgroundColor: 'yellow' }} />
+			</div>
+		</BoxElement>
+	);
 };
 
 export default Styleguide;
diff --git a/shared-ui/src/lib/styles/index.ts b/shared-ui/src/lib/styles/index.ts
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { theme } from './theme';
-import { Button } from '@radix-ui/themes';
+import { Box, Button } from '@radix-ui/themes';
 
 export const AppWrapper = styled.div`
 	display: block;
@@ -55,11 +55,29 @@ export const MainWrapper = styled.main`
 	padding: 0.5rem 1rem;
 	background-color: #ffffff;
 	color: #000000;
-	height: 100%;
-	width: 100%;
 	border: 1px solid #333;
 `;
 
+export const BoxElement = styled(Box)<{ $isBig?: boolean }>`
+	background-color: ${theme.colors.white};
+	color: ${theme.colors.black};
+	border-radius: ${theme.spacing.xs};
+	padding: ${theme.spacing.md};
+	min-height: 100px;
+	min-width: 100px;
+	box-sizing: 'border-box';
+	${(props) =>
+		props.$isBig &&
+		css`
+			min-height: 500px;
+			min-width: 400px;
+			background: transparent;
+			padding: ${theme.spacing.md};
+			color: ${theme.colors.primary};
+			box-shadow: ${theme.shadows.medium};
+		`}
+`;
+
 export const FooterWrapper = styled.footer`
 	display: flex;
 	justify-content: center;