refactor: with styled-components

src/components/Dash/styles.ts

@@ -1,30 +1,28 @@
-import { styled, theme } from '../../styles/stitches.config'
+import styled from 'styled-components'
 
-export const Wrapper = styled('main', {
-  display: 'grid',
-  gridTemplateColumns: '1fr 1fr',
-  position: 'fixed',
-  inset: 0
-})
+export const Wrapper = styled.main`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  position: fixed;
+  inset: 0;
+`
 
-export const Content = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-  padding: '5rem 1rem 1rem',
-  fontFamily: theme.fonts.roboto,
-  color: theme.colors.slate900,
-  background: theme.colors.slate50,
-  overflowY: 'scroll'
-})
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 5rem 1rem 1rem;
+  font-family: 'Roboto', sans-serif;
+  overflow-y: scroll;
+`
 
-export const Preview = styled('div', {
-  position: 'relative',
-  overflowY: 'scroll',
+export const Preview = styled.div`
+  position: relative;
+  overflow-y: scroll;
 
-  '&::after': {
-    content: '',
-    position: 'absolute',
-    inset: 0
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
   }
-})
+`