https://github.com/shaifarfan/react-admonition-component
https://github.com/shaifarfan/react-admonition-component
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shaifarfan/react-admonition-component
- Owner: ShaifArfan
- Created: 2022-01-02T07:24:38.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-02T12:53:22.000Z (almost 4 years ago)
- Last Synced: 2025-06-29T18:02:45.597Z (3 months ago)
- Language: JavaScript
- Size: 53.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
;
## React Admonition Component
with [React](https://reactjs.org/) and [Styled Components](https://www.styled-components.com/).
component:
```jsx
import React from 'react';
import styled from 'styled-components';
const AdmonitionStyles = styled.div`
.admonition {
color: black;
padding: 1rem;
border-radius: 8px;
}
.admonition-default {
background: grey;
}
.admonition-info {
background: #54c7ec;
}
.admonition-warning {
background: #ffc107;
}
.admonition-error {
background: #e63a3a;
}
.admonitionHeading {
text-transform: Capitalize;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.3rem;
}
.admonitionTitle{
font-size: 1.6rem;
font-weight: 500;
}
.admonitionIcon {
margin: 0;
display: flex;
svg {
width: 20px;
height: 20px;
stroke-width: 2;
stroke: currentColor;
}
}
.admonitionContent {
margin-top: 0.5rem;
font-size: 1.6rem;
}
`;
const admonitionTypes = {
default: 'default',
info: 'info',
warning: 'warning',
error: 'error',
};
function Admonition({ title, icon, children, type = 'default', className }) {
const getClasses = (classes) =>
classes
.filter((item) => item !== ' ')
.join(' ')
.trim();
return (
{icon && {icon}}
{title && (
{title}
)}
{children}
);
}
export default Admonition;
```