Create Widget component

TheeDouglasAM3 · Jan 25, 2021 · 83cc39b · 83cc39b
1 parent 467ef36
commit 83cc39b
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/pokemon-quiz-nextjs/src/components/Widget/index.js b/pokemon-quiz-nextjs/src/components/Widget/index.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+const Widget = styled.div`
+ margin-top: 24px;
+ margin-bottom: 24px;
+ border: 1px solid ${({ theme }) => theme.colors.primary};
+ background-color: ${({ theme }) => {
+ return theme.colors.mainBg;
+ }};
+ border-radius: 4px;
+ overflow: hidden;
+ h1, h2, h3 {
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 1;
+ margin-bottom: 0;
+ }
+ p {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ }
+`;
+
+Widget.Header = styled.header`
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 18px 32px;
+ background-color: ${({ theme }) => theme.colors.primary};
+ 
+ * {
+ margin: 0;
+ }
+`;
+
+Widget.Content = styled.div`
+ padding: 24px 32px 32px 32px;
+ & > *:first-child {
+ margin-top: 0;
+ }
+ & > *:last-child {
+ margin-bottom: 0;
+ }
+ ul {
+ list-style: none;
+ padding: 0;
+ }
+`;
+
+export default Widget;