From 4c87441e3d76e077162b6c21f575c7e4127e5775 Mon Sep 17 00:00:00 2001 From: Eric Cabrel TIOGO Date: Thu, 7 Jul 2022 07:57:02 +0200 Subject: [PATCH] feat(web): first iteration of the dashboard --- apps/web/next.config.js | 5 +- .../src/components/layout/private/sidebar.tsx | 220 +++++++++++++++++- apps/web/src/containers/private/board.tsx | 3 + packages/ui/package.json | 2 + packages/ui/src/icons/index.tsx | 21 ++ packages/ui/src/icons/logo-white.tsx | 52 +++++ packages/ui/src/icons/logo.tsx | 2 +- yarn.lock | 5 + 8 files changed, 299 insertions(+), 11 deletions(-) create mode 100644 packages/ui/src/icons/logo-white.tsx diff --git a/apps/web/next.config.js b/apps/web/next.config.js index 18413d04..efa133dd 100644 --- a/apps/web/next.config.js +++ b/apps/web/next.config.js @@ -3,7 +3,10 @@ const withTM = require('next-transpile-modules')(['@sharingan/ui']) /** @type {import('next').NextConfig} */ const nextConfigOptions = withTM({ - reactStrictMode: true + reactStrictMode: true, + images: { + domains: ['images.unsplash.com'] + } }); const sentryWebpackPluginOptions = { diff --git a/apps/web/src/components/layout/private/sidebar.tsx b/apps/web/src/components/layout/private/sidebar.tsx index d80f42fc..80a25ef8 100644 --- a/apps/web/src/components/layout/private/sidebar.tsx +++ b/apps/web/src/components/layout/private/sidebar.tsx @@ -1,11 +1,213 @@ -const Sidebar = () => { +/* This example requires Tailwind CSS v2.0+ */ +import { Dialog, Transition } from '@headlessui/react'; +import { Icon } from '@sharingan/ui'; +import Image from 'next/image'; +import { Fragment, useState } from 'react'; + +const navigation = [ + { current: true, href: '#', icon: Icon.Home, name: 'Dashboard' }, + { current: false, href: '#', icon: Icon.Users, name: 'Team' }, + { current: false, href: '#', icon: Icon.Folder, name: 'Projects' }, + { current: false, href: '#', icon: Icon.Calendar, name: 'Calendar' }, + { current: false, href: '#', icon: Icon.Inbox, name: 'Documents' }, + { current: false, href: '#', icon: Icon.ChartBart, name: 'Reports' }, +]; + +function classNames(...classes: string[]) { + return classes.filter(Boolean).join(' '); +} + +export default function Example() { + const [sidebarOpen, setSidebarOpen] = useState(false); + return ( -
-
Logo
-
Menu
-
Profile
-
- ); -}; + <> + {/* + This example requires updating your template: + + ``` + + + ``` + */} +
+ + + +
+ -export default Sidebar; +
+ + + +
+ +
+ +
+
+ +
+ +
+
+ +
+ + +
{/* Force sidebar to shrink to fit close icon */}
+
+
+ + + {/* Static sidebar for desktop */} +
+ {/* Sidebar component, swap this element with another sidebar if you like */} +
+
+
+ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+

Dashboard

+
+
+ {/* Replace with your content */} +
+
+
+ {/* /End replace */} +
+
+
+
+
+ + ); +} diff --git a/apps/web/src/containers/private/board.tsx b/apps/web/src/containers/private/board.tsx index c6719950..1776ee73 100644 --- a/apps/web/src/containers/private/board.tsx +++ b/apps/web/src/containers/private/board.tsx @@ -1,8 +1,11 @@ +import { NextSeo } from 'next-seo'; + import PrivateLayout from '@/components/layout/private/private-layout'; const Home = () => { return ( +

Welcome to Dashboard


diff --git a/packages/ui/package.json b/packages/ui/package.json index 2e22678a..237ea33b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -13,6 +13,8 @@ "tailwindcss": "^3.1.4" }, "dependencies": { + "@headlessui/react": "^1.6.5", + "@heroicons/react": "^1.0.6", "classnames": "^2.3.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx index c9282bdb..8a807039 100644 --- a/packages/ui/src/icons/index.tsx +++ b/packages/ui/src/icons/index.tsx @@ -1,3 +1,14 @@ +import { + CalendarIcon, + ChartBarIcon, + FolderIcon, + HomeIcon, + InboxIcon, + MenuIcon, + UsersIcon, + XIcon, +} from '@heroicons/react/outline'; + import CheckIcon from './check'; import CollectionIcon from './collection'; import CrossIcon from './cross'; @@ -8,24 +19,34 @@ import GithubIcon from './github'; import GoogleIcon from './google'; import ImportIcon from './import'; import LogoIcon from './logo'; +import LogoWhiteIcon from './logo-white'; import ProductHuntIcon from './product-hunt'; import ShareIcon from './share'; import SpinnerIcon from './spinner'; import TwitterIcon from './twitter'; export default { + Calendar: CalendarIcon, + ChartBart: ChartBarIcon, Check: CheckIcon, Collection: CollectionIcon, Cross: CrossIcon, DocumentSearch: DocumentSearchIcon, Embed: EmbedIcon, Extension: ExtensionIcon, + Folder: FolderIcon, Github: GithubIcon, Google: GoogleIcon, + Home: HomeIcon, Import: ImportIcon, + Inbox: InboxIcon, Logo: LogoIcon, + LogoWhite: LogoWhiteIcon, + Menu: MenuIcon, ProductHunt: ProductHuntIcon, Share: ShareIcon, Spinner: SpinnerIcon, Twitter: TwitterIcon, + Users: UsersIcon, + X: XIcon, }; diff --git a/packages/ui/src/icons/logo-white.tsx b/packages/ui/src/icons/logo-white.tsx new file mode 100644 index 00000000..d2ac0858 --- /dev/null +++ b/packages/ui/src/icons/logo-white.tsx @@ -0,0 +1,52 @@ +import { IconProps } from '../typings/components'; + +const LogoIcon = ({ height = 32, width = 160 }: IconProps) => { + return ( + /* + + + + + + + + + + + + + + + + + + + + + */ + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default LogoIcon; diff --git a/packages/ui/src/icons/logo.tsx b/packages/ui/src/icons/logo.tsx index 443e0e36..e4556e52 100644 --- a/packages/ui/src/icons/logo.tsx +++ b/packages/ui/src/icons/logo.tsx @@ -1,4 +1,4 @@ -import { IconProps } from '@/typings/common'; +import { IconProps } from '../typings/components'; const LogoIcon = ({ height = 32, width = 160 }: IconProps) => { return ( diff --git a/yarn.lock b/yarn.lock index 7a6f8bc1..3e671e67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1532,6 +1532,11 @@ resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.5.tgz#5587c537de809cf3146eb2ff263e5e940b1bf69c" integrity sha512-3VkKteDxlxf3fE0KbfO9t60KC1lM7YNpZggLpwzVNg1J/zwL+h+4N7MBlFDVpInZI3rKlZGpNx0PWsG/9c2vQg== +"@heroicons/react@^1.0.6": + version "1.0.6" + resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324" + integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ== + "@hookform/resolvers@^2.9.3": version "2.9.3" resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.9.3.tgz#13f6934cfe705e24fac094da377e0621adcfc424"