resolved issue of dynamically generating styled components

calblueprint · Oct 6, 2023 · 88a9996 · 88a9996
1 parent 080329b
commit 88a9996
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 58 deletions.
diff --git a/src/app/cases/page.tsx b/src/app/cases/page.tsx
@@ -7,6 +7,33 @@ import styled from 'styled-components';
 import ListingCard from '@/components/ListingCard';
 import timestampStringToDate from '@/utils/helpers';
 
+// styled components
+const PageContainer = styled.div`
+  display: grid;
+  place-items: center;
+  padding: 1rem 2rem;
+`;
+
+const PageTitle = styled.h1`
+  font-size: 2rem;
+  text-align: left;
+  margin: 0;
+  margin-right: auto;
+`;
+
+const MainDisplay = styled.main`
+  display: grid;
+  grid-template-columns: 5fr 10fr;
+  margin-top: 1rem;
+  width: 100%;
+`;
+
+const CardColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;
+
 export default function Page() {
   const [data, setData] = useState<CaseListing[]>([]);
 
@@ -17,32 +44,6 @@ export default function Page() {
     });
   }, []);
 
-  // styled components
-  const PageContainer = styled.div`
-    display: grid;
-    place-items: center;
-    padding: 1rem 2rem;
-  `;
-
-  const PageTitle = styled.h1`
-    font-size: 2rem;
-    text-align: left;
-    margin: 0;
-    margin-right: auto;
-  `;
-
-  const MainDisplay = styled.main`
-    display: grid;
-    grid-template-columns: 5fr 10fr;
-    margin-top: 1rem;
-  `;
-
-  const CardColumn = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  `;
-
   // page structure
   return (
     <PageContainer>

diff --git a/src/components/CardTag.tsx b/src/components/CardTag.tsx
@@ -1,20 +1,19 @@
 import React from 'react';
 import styled from 'styled-components';
 
+// styled components
+const Tag = styled.span`
+  border-radius: 100px;
+  font-size: 0.8rem;
+  padding: 0.2rem 0.5rem;
+`;
+
 export default function CardTag({
   text,
   color,
 }: {
   text: string;
   color: string;
 }) {
-  // styled components
-  const Tag = styled.span`
-    background-color: ${color};
-    border-radius: 100px;
-    font-size: 0.8rem;
-    padding: 0.2rem 0.5rem;
-  `;
-
-  return <Tag>{text}</Tag>;
+  return <Tag style={{ backgroundColor: color }}>{text}</Tag>;
 }
diff --git a/src/components/ListingCard.tsx b/src/components/ListingCard.tsx
@@ -2,6 +2,29 @@ import React from 'react';
 import styled from 'styled-components';
 import CardTag from './CardTag';
 
+// styled components
+const CardBody = styled.div`
+  border: 1px solid lightgray;
+  padding: 1rem;
+  border-radius: 10px;
+  transition: 150ms;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
+  }
+`;
+
+const CardTitle = styled.h2`
+  font-size: 1.5rem;
+  margin: 0;
+`;
+
+const TagRow = styled.div`
+  display: flex;
+  gap: 1rem;
+`;
+
 export default function ListingCard({
   title,
   languages,
@@ -21,29 +44,6 @@ export default function ListingCard({
   const attorneyColor = '#76aaca';
   const interpreterColor = '#82cf94';
 
-  // styled components
-  const CardBody = styled.div`
-    border: 1px solid lightgray;
-    padding: 1rem;
-    border-radius: 10px;
-    transition: 150ms;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
-    }
-  `;
-
-  const CardTitle = styled.h2`
-    font-size: 1.5rem;
-    margin: 0;
-  `;
-
-  const TagRow = styled.div`
-    display: flex;
-    gap: 1rem;
-  `;
-
   return (
     <CardBody>
       <CardTitle>{title}</CardTitle>