Skip to content

Commit

Permalink
Add NoteBox component
Browse files Browse the repository at this point in the history
  • Loading branch information
dmfalke committed Nov 15, 2024
1 parent 95c2e15 commit 8e04c82
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 0 deletions.
47 changes: 47 additions & 0 deletions packages/libs/coreui/src/components/containers/NoteBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { css } from '@emotion/react';
import React, { ReactNode } from 'react';
import { error, warning, mutedBlue } from '../../definitions/colors';

export interface Props {
type: 'info' | 'warning' | 'error';
children: ReactNode;
}

const baseCss = css`
border-left: 0.25em solid var(--note-box-border-color);
border-radius: 0.25em;
padding: 0.5em 1em;
background: var(--note-box-bg-color);
gap: 1em;
margin-bottom: 1em;
`;

const infoCss = css`
--note-box-bg-color: ${mutedBlue[100]};
--note-box-border-color: ${mutedBlue[600]};
${baseCss};
`;

const warningCss = css`
--note-box-bg-color: ${warning[100]};
--note-box-border-color: ${warning[600]};
font-weight: 500;
${baseCss};
`;

const errorCss = css`
--note-box-bg-color: ${error[100]};
--note-box-border-color: ${error[600]};
font-weight: 500;
${baseCss};
`;

export function NoteBox(props: Props) {
const finalCss =
props.type === 'warning'
? warningCss
: props.type === 'error'
? errorCss
: infoCss;
return <div css={finalCss}>{props.children}</div>;
}
1 change: 1 addition & 0 deletions packages/libs/coreui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export { default as SelectTree } from './components/inputs/SelectTree/SelectTree
export { default as SearchBox } from './components/inputs/SearchBox/SearchBox';
export { default as CheckboxList } from './components/inputs/checkboxes/CheckboxList';
export { default as CheckboxTree } from './components/inputs/checkboxes/CheckboxTree/CheckboxTree';
export { NoteBox } from './components/containers/NoteBox';

export { default as styles } from './styleDefinitions';
export { default as colors } from './definitions/colors';
Expand Down

0 comments on commit 8e04c82

Please sign in to comment.