add text panel #37

Author: Dany Boza

.env

@@ -0,0 +1,2 @@
+REACT_APP_ICONSCOUT_CLIENT_ID="client-id"
+REACT_APP_ICONSCOUT_SECRET="client-secret"

.env.sample

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

.gitignore

@@ -10,6 +10,11 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" />
     <link href="https://fonts.googleapis.com/css2?family=Karla:wght@200;300&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600;700&display=swap"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/index.html

@@ -34,3 +34,45 @@
     background: rgba($color: #fff, $alpha: 0.1);
   }
 }
+
+// Panel Text
+.panel-text {
+  width: 360px;
+  color: #fff;
+  .add-text-items {
+    display: grid;
+    gap: 0.5rem;
+  }
+  .label {
+    font-weight: 600;
+    padding: 0.8rem 0;
+    font-size: 0.84rem;
+  }
+  .add-text-item {
+    background: rgba($color: #fff, $alpha: 0.1);
+    height: 50px;
+    display: flex;
+    align-items: center;
+    padding-left: 1rem;
+    cursor: pointer;
+    transition: background 0.4s;
+    &:hover {
+      background: rgba($color: #fff, $alpha: 0.15);
+    }
+  }
+  .add-heading {
+    font-weight: 700;
+    font-size: 1.66rem;
+  }
+  .add-subheading {
+    background: rgba($color: #fff, $alpha: 0.1);
+    font-size: 1.12rem;
+    font-weight: 500;
+  }
+  .add-body-text {
+    background: rgba($color: #fff, $alpha: 0.1);
+    font-size: 0.76rem;
+    font-weight: 400;
+    color: rgba($color: #fff, $alpha: 0.9);
+  }
+}

src/scenes/Editor/Panels/PanelItem/PanelItem.scss

@@ -1,14 +1,65 @@
 import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
 import { SearchIcon } from '@chakra-ui/icons'
+import { useCanvasContext } from '@/components/Canvas/hooks'
+import { fabric } from 'fabric'
 
 function TextPanel() {
+  const { canvas } = useCanvasContext()
+
+  const addHeading = () => {
+    const text = new fabric.Textbox('Add a heading', {
+      fontSize: 32,
+      width: 320,
+      fontWeight: 700,
+      fontFamily: 'Lexend',
+      textAlign: 'center',
+    })
+    canvas.add(text)
+    text.center()
+  }
+
+  const addSubheading = () => {
+    const text = new fabric.Textbox('Add a subheading', {
+      fontSize: 24,
+      width: 320,
+      fontWeight: 500,
+      fontFamily: 'Lexend',
+      textAlign: 'center',
+    })
+    canvas.add(text)
+    text.center()
+  }
+
+  const addTextBody = () => {
+    const text = new fabric.Textbox('Add a little bit of body text', {
+      fontSize: 18,
+      width: 320,
+      fontWeight: 300,
+      fontFamily: 'Lexend',
+      textAlign: 'center',
+    })
+    canvas.add(text)
+    text.center()
+  }
   return (
     <>
-      <div style={{ padding: '1rem 2rem' }}>
+      <div className="panel-text" style={{ padding: '1rem 1.5rem' }}>
         <InputGroup>
-          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
+          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.600" />} />
           <Input style={{ background: '#fff' }} type="tel" placeholder="Search text" />
         </InputGroup>
+        <div className="label">Click text to add to page</div>
+        <div className="add-text-items">
+          <div onClick={addHeading} className="add-text-item add-heading">
+            Add a heading
+          </div>
+          <div onClick={addSubheading} className="add-text-item add-subheading">
+            Add a subheading
+          </div>
+          <div onClick={addTextBody} className="add-text-item add-body-text">
+            Add a litle bit of body text
+          </div>
+        </div>
       </div>
     </>
   )

src/scenes/Editor/Panels/PanelItem/TextPanel.tsx

@@ -6,7 +6,7 @@
   box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.5);
   display: flex;
   user-select: none;
-  font-family: 'Karla';
+  font-family: 'Lexend';
 }
 
 .panel-item-close {