crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-02 02:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete alert component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-21 21:29:50 +01:00
parent ae185cfcc5
commit 69bb70e52a
3 changed files with 88 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Alert/index.tsx
+15 -2
View File
@@ -1,7 +1,20 @@
import { Wrapper } from './styles';
const Alert = () => {
return <Wrapper></Wrapper>;
type AlertProps = {
className?: string;
color:
| 'client'
| 'productOwner'
| 'developer'
| 'admin'
| 'success'
| 'warning'
| 'error';
text: string;
};
const Alert = ({ text, ...props }: AlertProps) => {
return <Wrapper {...props}>{text}</Wrapper>;
};
export default Alert;
src/components/Alert/styles.ts
+71 -2
View File
@@ -1,3 +1,72 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
export const Wrapper = styled.div``;
type WrapperProps = {
color:
| 'client'
| 'productOwner'
| 'developer'
| 'admin'
| 'success'
| 'warning'
| 'error';
};
export const Wrapper = styled.div<WrapperProps>`
width: 100%;
height: auto;
padding: 0.938rem;
border-radius: 10px;
${({ color, theme }) => {
switch (color) {
case 'client':
return css`
border: 1px solid ${theme.colors.client.main};
color: ${theme.colors.client.main};
background: ${theme.colors.client.light};
`;
case 'productOwner':
return css`
border: 1px solid ${theme.colors.productOwner.main};
color: ${theme.colors.productOwner.main};
background: ${theme.colors.productOwner.light};
`;
case 'developer':
return css`
border: 1px solid ${theme.colors.developer.main};
color: ${theme.colors.developer.main};
background: ${theme.colors.developer.light};
`;
case 'admin':
return css`
border: 1px solid ${theme.colors.admin.main};
color: ${theme.colors.admin.main};
background: ${theme.colors.admin.light};
`;
case 'success':
return css`
border: 1px solid ${theme.colors.success.main};
color: ${theme.colors.success.main};
background: ${theme.colors.success.light};
`;
case 'warning':
return css`
border: 1px solid ${theme.colors.warning.main};
color: ${theme.colors.warning.main};
background: ${theme.colors.warning.light};
`;
case 'error':
return css`
border: 1px solid ${theme.colors.error.main};
color: ${theme.colors.error.main};
background: ${theme.colors.error.light};
`;
default:
return css`
border: 1px solid ${theme.colors.client.main};
color: ${theme.colors.client.main};
background: ${theme.colors.client.light};
`;
}
}}
`;