Add a basic design

ozgrozer · Jun 29, 2024 · 066aeb1 · 066aeb1
1 parent 6c0c0d4
commit 066aeb1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/components/Colors.jsx b/components/Colors.jsx
@@ -0,0 +1,21 @@
+import styles from '@styles/Colors.module.scss'
+
+export default () => {
+  const colors = ['#a1e8af', '#94c595', '#747c92', '#372772', '#3a2449']
+
+  return (
+    <div className={styles.colors}>
+      {colors.map((color, key) => {
+        return (
+          <div
+            key={key}
+            className={styles.color}
+            style={{ backgroundColor: color }}
+          >
+            {color}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,13 +1,15 @@
 import Head from 'next/head'
 
+import Colors from '@components/Colors'
+
 export default () => {
   return (
     <>
       <Head>
         <title>Colors</title>
       </Head>
 
-      <div>Hello World!</div>
+      <Colors />
     </>
   )
 }
diff --git a/styles/Colors.module.scss b/styles/Colors.module.scss
@@ -0,0 +1,10 @@
+.colors {
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+
+  .color {
+    flex: 1;
+    height: 100%;
+  }
+}