diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index fad8b44..f0e9e9e 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -4,5 +4,5 @@ /> diff --git a/public/index.html b/public/index.html index aa069f2..7958f3e 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,15 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + React App diff --git a/src/App.tsx b/src/App.tsx index 30c9cbd..f32cdc0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,29 @@ import React from "react"; +import ProgressIndicator from "./stories/ProgressIndicator"; +import Header1 from "./stories/Header1"; +import Header2 from "./stories/Header2"; import Button from "./stories/Button"; +import CenteredContainer from "./stories/CenteredContainer"; +import SpaceBetweenContainer from "./stories/SpaceBetweenContainer"; +import Spacer from "./stories/Spacer"; + function App() { return ( -
- -
+ + + + Securely Share Your Secrets + + Tell someone + + + + + + + ); } diff --git a/src/shared/styles.js b/src/shared/styles.js index c47f5b6..69b2a32 100644 --- a/src/shared/styles.js +++ b/src/shared/styles.js @@ -3,6 +3,7 @@ export const color = { secondary: "#32EFE7", white: "#FFFFFF", black: "#000000", + background: "#091132", }; export const typography = { diff --git a/src/stories/CenteredContainer.tsx b/src/stories/CenteredContainer.tsx new file mode 100644 index 0000000..5e64012 --- /dev/null +++ b/src/stories/CenteredContainer.tsx @@ -0,0 +1,59 @@ +import React, { FC, ReactNode } from "react"; +import styled, { css } from "styled-components"; +import CSS from "csstype"; + +import { color } from "../shared/styles"; + +interface CenteredContainerProps { + children: ReactNode | null; + style?: CSS.Properties; + fullscreen?: boolean; + wide?: boolean; +} + +const CenteredContainer: FC = ({ + children, + style, + fullscreen = false, + wide = false, +}) => { + return ( + + {children} + + ); +}; + +export default CenteredContainer; + +const StyledDiv = styled.div` + height: 100vh; + text-align: center; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + ${(props) => + props.fullscreen && + css` + width: 100vw; + background-color: ${color.background}; + `} + + ${(props) => + !props.fullscreen && + css` + max-width: 600px; + width: 100%; + padding: 0 30px; + `} + + ${(props) => + !props.fullscreen && + props.wide && + css` + max-width: 1200px; + `} +`; diff --git a/src/stories/Header1.tsx b/src/stories/Header1.tsx new file mode 100644 index 0000000..a173081 --- /dev/null +++ b/src/stories/Header1.tsx @@ -0,0 +1,24 @@ +import React, { FC, ReactNode } from "react"; +import styled from "styled-components"; +import CSS from "csstype"; + +import { color, typography } from "../shared/styles"; + +export interface Header1Props { + children: ReactNode | null; + style?: CSS.Properties; +} + +const Header1: FC = ({ children, style }) => { + return {children}; +}; + +export default Header1; + +const StyledHeader1 = styled.h2` + font-size: 6.4rem; + font-family: ${typography.heading}; + font-weight: ${typography.weight.regular}; + + color: ${color.white}; +`; diff --git a/src/stories/Header2.tsx b/src/stories/Header2.tsx new file mode 100644 index 0000000..60e1265 --- /dev/null +++ b/src/stories/Header2.tsx @@ -0,0 +1,24 @@ +import React, { FC, ReactNode } from "react"; +import styled from "styled-components"; +import CSS from "csstype"; + +import { color, typography } from "../shared/styles"; + +export interface Header2Props { + children: ReactNode | null; + style?: CSS.Properties; +} + +const Header2: FC = ({ children, style }) => { + return {children}; +}; + +export default Header2; + +const StyledHeader2 = styled.h2` + font-size: 3.2rem; + font-family: ${typography.heading}; + font-weight: ${typography.weight.regular}; + + color: ${color.white}; +`; diff --git a/src/stories/ProgressIndicator.tsx b/src/stories/ProgressIndicator.tsx new file mode 100644 index 0000000..f7ac42d --- /dev/null +++ b/src/stories/ProgressIndicator.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +interface ProgressIndicatorProps { + current: 1 | 2 | 3; + size?: string; +} + +const ProgressIndicator = ({ + current, + size = "148", +}: ProgressIndicatorProps) => { + const color = "#6B6B6B"; + + const cx1 = 12; + const cx2 = 72; + const cx3 = 132; + + const currentCircleCX = current === 1 ? cx1 : current === 2 ? cx2 : cx3; + + return ( +
+ + + + + + + +
+ ); +}; + +export default ProgressIndicator; diff --git a/src/stories/SpaceBetweenContainer.tsx b/src/stories/SpaceBetweenContainer.tsx new file mode 100644 index 0000000..1a08ef3 --- /dev/null +++ b/src/stories/SpaceBetweenContainer.tsx @@ -0,0 +1,33 @@ +import React, { FC, ReactNode } from "react"; +import styled, { css } from "styled-components"; +import CSS from "csstype"; + +interface SpaceBetweenContainerProps { + children: ReactNode | null; + style?: CSS.Properties; + width100pct?: boolean; +} + +const SpaceBetweenContainer: FC = ({ + children, + style, + width100pct, +}) => { + return ( + + {children} + + ); +}; + +export default SpaceBetweenContainer; + +const StyledDiv = styled.div` + display: flex; + justify-content: space-between; + ${(props) => + props.width100pct && + css` + width: 100%; + `} +`; diff --git a/src/stories/Spacer.tsx b/src/stories/Spacer.tsx new file mode 100644 index 0000000..c56deaa --- /dev/null +++ b/src/stories/Spacer.tsx @@ -0,0 +1,18 @@ +import React, { FC, ReactNode } from "react"; +import styled from "styled-components"; +import CSS from "csstype"; + +interface SpacerProps { + style?: CSS.Properties; + space?: string; +} + +const Spacer: FC = ({ style, space = "20px" }) => { + return ; +}; + +export default Spacer; + +const StyledDiv = styled.div` + height: ${(props) => props.space}; +`;