feat: add settings buttons

pages/index.js

@@ -1,6 +1,17 @@
 import Head from 'next/head';
 import styles from '../styles/Home.module.css';
 import LiveEditor from '../components/editor/live-editor'
+import { GearIcon } from '@radix-ui/react-icons'
+
+function Settings () {
+  return <div className={styles.setting}>
+    <button onClick={() => {
+      // show some dialog
+    }}>
+      <GearIcon />
+    </button>
+  </div>
+}
 
 export default function Home() {
   return (
@@ -12,6 +23,7 @@ export default function Home() {
 
       <main>
         <div>
+          <Settings />
           <LiveEditor />
         </div>
       </main>

styles/Home.module.css

@@ -1,88 +1,115 @@
 .container {
-  padding: 0 0.5rem;
-  margin: 0 auto;
+    padding: 0 0.5rem;
+    margin: 0 auto;
 }
 
 .title a {
-  color: #0070f3;
-  text-decoration: none;
+    color: #0070f3;
+    text-decoration: none;
 }
 
 .title a:hover,
 .title a:focus,
 .title a:active {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 .title {
-  margin: 0 0 1rem;
-  line-height: 1.15;
-  font-size: 3.6rem;
+    margin: 0 0 1rem;
+    line-height: 1.15;
+    font-size: 3.6rem;
 }
 
 .title {
-  text-align: center;
+    text-align: center;
 }
 
 .title,
 .description {
-  text-align: center;
+    text-align: center;
 }
 
 .description {
-  line-height: 1.5;
-  font-size: 1.5rem;
+    line-height: 1.5;
+    font-size: 1.5rem;
 }
 
 .grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
 
-  max-width: 800px;
-  margin-top: 3rem;
+    max-width: 800px;
+    margin-top: 3rem;
 }
 
 .card {
-  margin: 1rem;
-  flex-basis: 45%;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition:
-    color 0.15s ease,
+    margin: 1rem;
+    flex-basis: 45%;
+    padding: 1.5rem;
+    text-align: left;
+    color: inherit;
+    text-decoration: none;
+    border: 1px solid #eaeaea;
+    border-radius: 10px;
+    transition: color 0.15s ease,
     border-color 0.15s ease;
 }
 
 .card:hover,
 .card:focus,
 .card:active {
-  color: #0070f3;
-  border-color: #0070f3;
+    color: #0070f3;
+    border-color: #0070f3;
 }
 
 .card h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
+    margin: 0 0 1rem 0;
+    font-size: 1.5rem;
 }
 
 .card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
+    margin: 0;
+    font-size: 1.25rem;
+    line-height: 1.5;
 }
 
 .logo {
-  height: 1em;
+    height: 1em;
 }
 
 @media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
+    .grid {
+        width: 100%;
+        flex-direction: column;
+    }
 }
+
+.setting {
+    box-sizing: border-box;
+    position: absolute;
+    top: calc(50% - 24px);
+    left: 15px;
+}
+
+.setting button {
+    display: flex;
+    position: relative;
+    z-index: 1;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border-radius: 100%;
+    width: 48px;
+    height: 48px;
+    color: var(--gray-12);
+    will-change: transform, box-shadow, opacity;
+    transition: all 100ms ease 0s;
+    box-shadow: var(--black-a6) 0 3px 16px -5px, var(--black-a2) 0px 1px 3px
+}
+
+.setting button svg {
+    width: 24px;
+    height: 24px;
+}