diff options
| author | Oliver <oliver@mohlin.dev> | 2025-06-15 06:50:06 +0200 |
|---|---|---|
| committer | Oskar <oskar@mullvad.net> | 2025-06-30 11:05:27 +0200 |
| commit | ced6456945c038b05e7222c13001488eb323d422 (patch) | |
| tree | 1c8b307aff8c10c8c8224798182063433a31e1bd | |
| parent | 89fdea972530236fecea0fa182556604a061dc46 (diff) | |
| download | mullvadvpn-ced6456945c038b05e7222c13001488eb323d422.tar.xz mullvadvpn-ced6456945c038b05e7222c13001488eb323d422.zip | |
Add View component
4 files changed, 53 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/View.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/View.tsx new file mode 100644 index 0000000000..37c1592ead --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/View.tsx @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +import { Colors, colors, ColorVariables } from '../../foundations'; +import { Flex, FlexProps } from '../flex'; +import { Container } from './components'; + +export type ViewProps = FlexProps & { + backgroundColor?: Colors; +}; + +export const StyledView = styled(Flex)<{ $backgroundColor?: ColorVariables }>` + height: 100vh; + max-width: 100%; + background-color: ${({ $backgroundColor }) => $backgroundColor || undefined}; +`; + +function View({ backgroundColor = 'blue', ...props }: ViewProps) { + return ( + <StyledView $backgroundColor={colors[backgroundColor]} $flexDirection="column" {...props} /> + ); +} + +const ViewNamespace = Object.assign(View, { + Container: Container, +}); + +export { ViewNamespace as View }; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/components/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/components/Container.tsx new file mode 100644 index 0000000000..69d2f5291b --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/components/Container.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { spacings } from '../../../foundations'; +import { Flex, FlexProps } from '../../flex'; + +export interface ContainerProps extends FlexProps { + size?: '3' | '4'; + children: React.ReactNode; +} + +const sizes: Record<'3' | '4', string> = { + '3': `calc(100% - ${spacings.large} * 2)`, + '4': `calc(100% - ${spacings.medium} * 2)`, +}; + +const StyledFlex = styled(Flex)<{ $size: string }>((props) => ({ + width: props.$size, + margin: 'auto', +})); + +export function Container({ size = '4', ...props }: ContainerProps) { + return <StyledFlex $size={sizes[size]} $flexDirection="column" {...props} />; +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/components/index.ts new file mode 100644 index 0000000000..8a1103ffa4 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/components/index.ts @@ -0,0 +1 @@ +export * from './Container'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/index.ts new file mode 100644 index 0000000000..450cf3c6ae --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/view/index.ts @@ -0,0 +1 @@ +export * from './View'; |