Merge pull request #40 from Vinyl-Davyl/ui-development-kickoff

feat(UI): major UI improvement on template playground and sync with AccordUI
accordproject · Apr 24, 2024 · d3f420d · d3f420d
2 parents 23b86a4 + 2324e1f
commit d3f420d
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image" href="https://i0.wp.com/accordproject.org/wp-content/uploads/2020/08/cropped-ms-icon-310x310-1.png?fit=512%2C512&ssl=1" />
+    <link
+      rel="icon"
+      type="image"
+      href="https://i0.wp.com/accordproject.org/wp-content/uploads/2020/08/cropped-ms-icon-310x310-1.png?fit=512%2C512&ssl=1"
+    />
+    <link
+      rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Template Playground</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "regenerator-runtime": "^0.13.11",
+    "semantic-ui-react": "^2.1.5",
     "ts-debounce": "^4.0.0",
     "zustand": "^4.3.9"
   },

diff --git a/public/logo.png b/public/logo.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,22 +1,27 @@
-import { useEffect, useState } from "react";
-import { App as AntdApp, Typography, Col, Collapse, Row } from "antd";
-import { Layout, theme } from "antd";
-const { Header, Content } = Layout;
-
+import React, { useEffect, useState } from "react";
+import { App as AntdApp, Layout, Row, Col, Collapse, theme } from "antd";
+import Navbar from "./Navbar";
 import AgreementData from "./AgreementData";
 import AgreementHtml from "./AgreementHtml";
-import "./App.css";
 import Errors from "./Errors";
 import TemplateMarkdown from "./TemplateMarkdown";
 import TemplateModel from "./TemplateModel";
 import useAppStore from "./store";
 import SampleDropdown from "./SampleDropdown";
-import Links from "./Links";
 
-function App() {
+const { Content } = Layout;
+
+const App = () => {
   const init = useAppStore((state) => state.init);
   const [activePanel, setActivePanel] = useState<string | string[]>();
 
+  const scrollToExplore = () => {
+    const exploreContent = document.getElementById("explore");
+    if (exploreContent) {
+      exploreContent.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   const {
     token: { colorBgContainer },
   } = theme.useToken();
@@ -51,36 +56,23 @@ function App() {
     <AntdApp>
       <Layout>
         <Layout>
-          <Header
-            style={{
-              textAlign: "center",
-              padding: 0,
-              background: colorBgContainer,
-            }}
-          >
-            <Typography.Title level={2} style={{ fontWeight: 700 }}>
-              Template Playground{" "}
-              <span style={{ fontSize: "80%", color: "#87CEEB" }}>(BETA)</span>
-            </Typography.Title>
-          </Header>
+          <Navbar scrollToExplore={scrollToExplore} />
           <Content>
             <div
               style={{
+                marginTop: 60,
                 padding: 24,
                 minHeight: 360,
                 background: colorBgContainer,
               }}
             >
-              <Row>
+              <Row id="explore">
                 <Col span={4}>
                   <SampleDropdown />
                 </Col>
-                <Col span={14}>
+                <Col span={18}>
                   <Errors />
                 </Col>
-                <Col span={6}>
-                  <Links />
-                </Col>
               </Row>
               <div
                 style={{
@@ -108,6 +100,6 @@ function App() {
       </Layout>
     </AntdApp>
   );
-}
+};
 
 export default App;
diff --git a/src/Links.tsx b/src/Links.tsx