Created PalleteItem Component

src/components/PalleteDisplay/PalleteItem/PalleteItem.tsx

@@ -0,0 +1,31 @@
+// Style
+import { PalleteType } from "../../../context/PalletesContext";
+import ColorStripe from "./ColorStripe/ColorStripe";
+import StyledPalleteItem from "./StyledPalleteItem";
+
+type PalleteItemProps = {
+    pallete: PalleteType;
+}
+
+const PalleteItem = ({pallete} : PalleteItemProps) => {
+    const {color1, color2, color3, color4} = pallete;
+    return (
+        <StyledPalleteItem>
+            <section className='color-box'>
+                <ColorStripe colorValue={color1} />
+                <ColorStripe colorValue={color2} />
+                <ColorStripe colorValue={color3} />
+                <ColorStripe colorValue={color4} />
+            </section>
+            <section className='pallete-info'>
+                <button className='like-btn'>
+                    Like
+                </button>
+
+                <p className='pallete-date'>3 weeks ago</p>
+            </section>
+        </StyledPalleteItem>
+    )
+}
+
+export default PalleteItem;

src/components/PalleteDisplay/PalleteItem/StyledPalleteItem.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const StyledPalleteItem = styled.article`
+    width: 20vw;
+    height: 200px;
+    background-color: red;
+    .color-box {
+        overflow: auto;
+        display: grid;
+        grid-template-rows: 70px 50px 30px 30px;
+    }
+`
+
+export default StyledPalleteItem;