diff --git a/docs/components/TWGBadge/TWGBadge.module.css b/docs/components/TWGBadge/TWGBadge.module.css new file mode 100644 index 0000000000..a06f66be6f --- /dev/null +++ b/docs/components/TWGBadge/TWGBadge.module.css @@ -0,0 +1,62 @@ +.extraContainer { + display: flex; + flex-direction: column; + margin-top: 0.5rem; + text-align: center; + background-color: #171717; + padding: 1rem; + gap: 1rem; + border-radius: 0.5rem; +} + +.extraText { + padding-left: 0.5rem; + padding-right: 0.5rem; + font-weight: bold; + color: #fff; +} + +.extraButton { + width: 100%; + border: none; + padding: 0.5rem 1rem; + font-weight: 500; + background-color: #f9d85b; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.extraButton:hover { + transform: scale(1.05); + background-color: #fff; +} + +:is(html[class~=dark]) .extraContainer { + background-color: #87ccef; +} + +:is(html[class~=dark]) .extraText { + color: #171717; +} + +:is(html[class~=dark]) .extraButton { + background-color: #171717; +} + + +@media (min-width: 1280px) { + .visibleOnLarge { + display: inherit; + } + .visibleOnSmall { + display: none; + } +} + +@media (max-width: 1279px) { + .visibleOnLarge { + display: none; + } + .visibleOnSmall { + display: flex; + } +} diff --git a/docs/components/TWGBadge/TWGBadge.tsx b/docs/components/TWGBadge/TWGBadge.tsx new file mode 100644 index 0000000000..4426fd9d7a --- /dev/null +++ b/docs/components/TWGBadge/TWGBadge.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import styles from './TWGBadge.module.css'; + +interface TWGBadgeProps { + visibleOnLarge?: boolean; +} + +const TWGBadge = ({visibleOnLarge}: TWGBadgeProps) => { + const visibilityClass = visibleOnLarge + ? styles.visibleOnLarge + : styles.visibleOnSmall; + + return ( +