feat: add drawer for details (truefoundry#136)

edu-lab-research · Apr 16, 2024 · 7a9329d · 7a9329d
1 parent b8009ed
commit 7a9329d
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 28 deletions.
diff --git a/frontend/src/assets/img/drawer_bars.svg b/frontend/src/assets/img/drawer_bars.svg
diff --git a/frontend/src/assets/img/logos/CognitaLightLogo.png b/frontend/src/assets/img/logos/CognitaLightLogo.png
diff --git a/frontend/src/assets/img/logos/CognitaLogo.png b/frontend/src/assets/img/logos/CognitaLogo.png
diff --git a/frontend/src/assets/img/logos/x_twitter.png b/frontend/src/assets/img/logos/x_twitter.png
diff --git a/frontend/src/components/assets/IconProvider.tsx b/frontend/src/components/assets/IconProvider.tsx
@@ -3,9 +3,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { forwardRef } from 'react'
 import classNames from 'classnames'
 import paperPlaneIcon from '@/assets/img/paper-plane-top.svg'
+import xTwitterIcon from '@/assets/img/logos/x_twitter.png'
 
 export const EXT_ICONS_MAP: { readonly [key: string]: any } = {
   'paper-plane-top': paperPlaneIcon,
+  'x-twitter': xTwitterIcon,
 }
 
 interface IconProps {

diff --git a/frontend/src/components/base/atoms/Button.tsx b/frontend/src/components/base/atoms/Button.tsx
@@ -7,7 +7,7 @@ import Spinner from './Spinner'
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: FontAwesomeIconProps['icon']
+  icon?: FontAwesomeIconProps['icon'] | string
   text?: React.ReactNode | JSX.Element | string
   style?: object
   rounded?: boolean

diff --git a/frontend/src/fontawesome.ts b/frontend/src/fontawesome.ts
@@ -24,6 +24,7 @@ import {
   faCaretRight,
   faCircleInfo,
   faTriangleExclamation,
+  faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 
 const icons: any[] = [
@@ -50,6 +51,7 @@ const icons: any[] = [
   faChevronDown,
   faPaperPlane,
   faCaretRight,
+  faXmark,
 ]
 
 library.add(...icons)
diff --git a/frontend/src/screens/dashboard/docsqa/Navbar.tsx b/frontend/src/screens/dashboard/docsqa/Navbar.tsx
@@ -1,4 +1,6 @@
-import logo from '@/assets/img/logos/logo-with-text.png'
+import Logo from '@/assets/img/logos/CognitaLogo.png'
+import LightLogo from '@/assets/img/logos/CognitaLightLogo.png'
+import Bars from '@/assets/img/drawer_bars.svg'
 import { IconProp } from '@fortawesome/fontawesome-svg-core'
 import {
   IconDefinition,
@@ -7,6 +9,7 @@ import {
   faPlay,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Drawer } from '@mui/material'
 import classNames from 'classnames'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
@@ -40,6 +43,8 @@ function getMenuOptions(): {
 }
 
 export default function NavBar({ children }: any) {
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)
+
   const menu = getMenuOptions().map((menuOption, index) => (
     <div key={index} className="align-middle mt-1 flex items-center">
       <NavLink
@@ -75,36 +80,111 @@ export default function NavBar({ children }: any) {
   ))
 
   return (
-    <div className="flex flex-col border bg-white font-inter">
-      <div className="flex items-center inline-block mx-5 my-4 gap-x-4 flex-wrap">
-        <div className="flex gap-10 items-center">
-          <Link to={'/'}>
-            <img src={logo} className="h-8 w-[10.875rem]" />
-          </Link>
-          <div className="flex gap-5 items-center">{menu}</div>
-        </div>
-
-        <div className="flex-1" />
-        <Button
-          className="btn-xs text-xs h-7"
-          text="View All APIs"
-          onClick={() => {
-            window.open(`${window.location.origin}/api/`, '_blank')
-          }}
-        />
+    <>
+      <Drawer
+        anchor={'left'}
+        open={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        className="feature-importance"
+      >
         <div
-          className="mt-1 mr-2 cursor-pointer flex justify-end items-center self-flex-end"
-          onClick={() => {
-            window.open(
-              'https://github.com/truefoundry/docs-qa-playground',
-              '_blank'
-            )
+          className="bg-white w-[24rem] h-full feature-content text-white font-lab"
+          style={{
+            background:
+              'radial-gradient(246.99% 59.28% at 50.13% 1.56%, #4F46E5 0%, #000000 100%)',
           }}
         >
-          <IconProvider icon={'fa-brands fa-github' as IconProp} size={1.25} />
+          <div className="flex items-center gap-4 pt-5 px-8">
+            <IconProvider
+              icon="xmark"
+              className="px-1 cursor-pointer"
+              size={1.5}
+              onClick={() => setIsDrawerOpen(false)}
+            />
+            <img src={LightLogo} className="h-8" />
+          </div>
+          <div className="border-t border-t-[#82A0CE] w-full mt-[1.125rem]"></div>
+          <div className="flex flex-col gap-4 py-6 px-8 text-lg font-medium">
+            <a
+              href="https://www.truefoundry.com/blog/cognita-building-an-open-source-modular-rag-applications-for-production"
+              target="_blank"
+              className="p-1.5"
+            >
+              What is Cognita?
+            </a>
+            <a
+              href="https://github.com/truefoundry/cognita"
+              target="_blank"
+              className="p-1.5 flex gap-2 items-center"
+            >
+              <IconProvider
+                icon={'fa-brands fa-github' as IconProp}
+                size={1.125}
+              />
+              Github
+            </a>
+            <Button
+              className="w-full h-10 bg-white text-black hover:bg-white text-lg font-bold mt-3"
+              text="Talk to us"
+              onClick={() => {
+                window.open(
+                  'https://www.truefoundry.com/book-demo?utm_source=cognita&utm_medium=cognita&utm_campaign=cognita',
+                  '_blank'
+                )
+              }}
+            />
+          </div>
+        </div>
+      </Drawer>
+      <div className="flex flex-col border bg-white font-inter">
+        <div className="flex items-center inline-block pl-5 px-5 py-4 gap-x-4 flex-wrap">
+          <div className="flex items-center">
+            <div
+              className="mr-4 cursor-pointer hover:bg-[#f5f5f5] p-1"
+              onClick={() => setIsDrawerOpen(true)}
+            >
+              <img src={Bars} className="h-7 w-7" />
+            </div>
+            <Link to={'/'} className="mr-6">
+              <img src={Logo} className="h-8 w-[18rem]" />
+            </Link>
+            <div className="flex gap-5 items-center">{menu}</div>
+          </div>
+
+          <div className="flex-1" />
+          <Button
+            white
+            className="btn-xs text-sm h-7"
+            text="View All APIs"
+            onClick={() => {
+              window.open(`${window.location.origin}/api/`, '_blank')
+            }}
+          />
+          <div
+            className="cursor-pointer flex justify-end items-center self-flex-end"
+            onClick={() => {
+              window.open(
+                'https://github.com/truefoundry/docs-qa-playground',
+                '_blank'
+              )
+            }}
+          >
+            <IconProvider
+              icon={'fa-brands fa-github' as IconProp}
+              size={1.25}
+            />
+          </div>
+          <Button
+            className="btn-xs text-sm h-7 bg-black"
+            text="Tweet"
+            icon="x-twitter"
+            onClick={() => {
+              window.open('https://ctt.ac/XM87B', '_blank')
+            }}
+          />
+          {children}
         </div>
-        {children}
       </div>
-    </div>
+    </>
   )
 }