feat(dashboard): all sites area (#566)

* feat: site card * fix: remove create project button * feat: add menu story * fix: menu item and link * fix: add focus border to card * fix: add focus visible to sidebar nav item * fix: user menu * fix: add usage threshold * feat: site card menu * fix(dashboard): mobile style * feat: empty site card
devrsi0n · Feb 25, 2023 · 87103dd · 87103dd
1 parent 01288c3
commit 87103dd
Show file tree

Hide file tree

Showing 18 changed files with 239 additions and 267 deletions.
diff --git a/packages/ui/public/tailwind.css b/packages/ui/public/tailwind.css
@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: hsl(var(--tw-colors-gray-700) / 1);
+  border-color: hsl(var(--tw-colors-gray-500) / 1);
   /* 2 */
 }
 
@@ -558,6 +558,11 @@ video {
   max-width: 65ch;
 }
 
+.prose :where(p):not(:where([class~="not-prose"] *)) {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
 .prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-lead);
   font-size: 1.25em;
@@ -911,11 +916,6 @@ video {
   line-height: 1.75;
 }
 
-.prose :where(p):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
 .prose :where(video):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
@@ -1212,6 +1212,10 @@ video {
   margin: 0.25rem;
 }
 
+.m-32 {
+  margin: 8rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1787,6 +1791,10 @@ video {
   width: 12rem;
 }
 
+.w-\[18px\] {
+  width: 18px;
+}
+
 .w-96 {
   width: 24rem;
 }
@@ -3008,6 +3016,18 @@ video {
   padding-left: 0.25rem;
 }
 
+.\!pl-3 {
+  padding-left: 0.75rem !important;
+}
+
+.\!pl-2\.5 {
+  padding-left: 0.625rem !important;
+}
+
+.\!pl-2 {
+  padding-left: 0.5rem !important;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -3111,6 +3131,11 @@ video {
   letter-spacing: -0.02em;
 }
 
+.\!text-display-sm {
+  font-size: 1.875rem !important;
+  line-height: 2.375rem !important;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -3175,6 +3200,10 @@ video {
   line-height: 1rem;
 }
 
+.leading-9 {
+  line-height: 2.25rem;
+}
+
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -3553,6 +3582,10 @@ video {
   -webkit-line-clamp: 2;
 }
 
+.first-letter\:uppercase::first-letter {
+  text-transform: uppercase;
+}
+
 .before\:absolute::before {
   content: var(--tw-content);
   position: absolute;
@@ -3708,11 +3741,6 @@ video {
   background-color: hsl(var(--tw-colors-indigo-500) / var(--tw-bg-opacity));
 }
 
-.hover\:bg-red-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--tw-colors-red-300) / var(--tw-bg-opacity));
-}
-
 .hover\:text-primary-1100:hover {
   --tw-text-opacity: 1;
   color: hsl(var(--tw-colors-primary-1100) / var(--tw-text-opacity));

diff --git a/packages/ui/src/blocks/page-title/page-title.tsx b/packages/ui/src/blocks/page-title/page-title.tsx
@@ -33,9 +33,7 @@ export function PageTitle({
 }: PageTitleProps): JSX.Element {
   return (
     <div className={clsx('mb-6 w-fit', className)} {...restProps}>
-      <Heading as="h1" className="!text-4xl w-fit font-bold !leading-none">
-        {children}
-      </Heading>
+      <Heading className="font-semibold">{children}</Heading>
     </div>
   );
 }
diff --git a/packages/ui/src/blocks/site-card/empty-site-card.tsx b/packages/ui/src/blocks/site-card/empty-site-card.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { Card, Link, IconPlus, Text } from '../../components';
+import { cardStyle } from './site-card';
+
+export function EmptySiteCard(): JSX.Element {
+  return (
+    <Card
+      as={Link}
+      href={`/site/create`}
+      variant="plain"
+      className={clsx(
+        'flex flex-col items-center justify-center border-2 border-dashed !border-primary-600 shadow-primary-400 hover:shadow-primary-400',
+        cardStyle,
+      )}
+    >
+      <div className="mb-4 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full border-8 border-primary-300 bg-primary-500 text-primary-900">
+        <IconPlus />
+      </div>
+      <Text className="mb-1 font-semibold text-primary-900">
+        Create new site
+      </Text>
+      <Text size="sm">Connect your Notion database and go live</Text>
+    </Card>
+  );
+}
diff --git a/packages/ui/src/blocks/site-card/site-card-menu.tsx b/packages/ui/src/blocks/site-card/site-card-menu.tsx
@@ -0,0 +1,68 @@
+import {
+  IconExternalLink,
+  IconGlobe,
+  IconLayers,
+  IconMoreVertical,
+  IconPieChart,
+  IconSettings,
+  Menu,
+} from '../../components';
+import { RouterOutputs } from '../../utilities';
+import { MenuLink } from '../user-menu/menu-link';
+
+export function SiteCardMenu({
+  site,
+}: {
+  site: RouterOutputs['site']['all'][number];
+}): JSX.Element {
+  const siteHome = `/site/${site.subdomain}`;
+  const links = [
+    {
+      name: 'Site home',
+      href: siteHome,
+      // TODO: should be double layer
+      icon: IconLayers,
+    },
+    {
+      name: 'Live',
+      href: `https://${site.subdomain}.chirpy.dev`,
+      icon: IconExternalLink,
+    },
+    {
+      name: 'Analytics',
+      href: `${siteHome}/analytics`,
+      icon: IconPieChart,
+    },
+    {
+      name: 'Domain',
+      href: `${siteHome}/domain`,
+      icon: IconGlobe,
+    },
+    {
+      name: 'Settings',
+      href: `${siteHome}/settings`,
+      icon: IconSettings,
+    },
+  ];
+
+  return (
+    <Menu>
+      <Menu.Button className="ml-auto">
+        <IconMoreVertical size={20} />
+      </Menu.Button>
+      <Menu.Items align="start" className="min-w-[200px]">
+        {links.map((link) => (
+          <Menu.Item
+            key={link.name}
+            as={MenuLink}
+            variant="plain"
+            href={link.href}
+          >
+            {<link.icon size={16} />}
+            {link.name}
+          </Menu.Item>
+        ))}
+      </Menu.Items>
+    </Menu>
+  );
+}
diff --git a/packages/ui/src/blocks/site-card/site-card.tsx b/packages/ui/src/blocks/site-card/site-card.tsx
@@ -1,51 +1,43 @@
 import { cpDayjs } from '@chirpy-dev/utils';
-import * as React from 'react';
 
-import { Card, Divider, Heading, Link, List, Text } from '../../components';
-import { listHoverable } from '../../styles/common';
+import { Card, Link, Text } from '../../components';
 import { RouterOutputs } from '../../utilities/trpc-client';
+import { SiteCardMenu } from './site-card-menu';
 
 export type SiteCardProps = {
   site: RouterOutputs['site']['all'][number];
 };
 
-export function SiteCard({ site }: SiteCardProps): JSX.Element {
-  const posts = site.posts.slice(0, 5);
+export const cardStyle =
+  'block h-[170px] w-[350px] rounded-xl bg-gray-0 p-6 shadow-sm focus-visible:ring focus-visible:ring-gray-700';
 
+export function SiteCard({ site }: SiteCardProps): JSX.Element {
   return (
     <Card
       as={Link}
       href={`/site/${site.subdomain}`}
-      variant="plain"
       key={site.id}
-      className="block space-y-4 pt-4"
+      className={cardStyle}
+      variant="plain"
     >
-      <div className="flex flex-row flex-nowrap items-center justify-between space-x-2 pl-6 pr-3">
-        <Heading as="h3">{site.name}</Heading>
-      </div>
-      <Text className="px-6" variant="secondary">
-        {site.subdomain}
-      </Text>
-      {posts.length > 0 ? (
-        <div>
-          <List className="px-4">
-            {posts.map((page) => (
-              <List.Item key={page.id} className={listHoverable}>
-                {/* <Text title={page.title}>{page.title}</Text> */}
-              </List.Item>
-            ))}
-          </List>
+      <div className="flex w-full flex-row items-start gap-4">
+        <img
+          src="https://via.placeholder.com/50"
+          alt="favicon"
+          width={48}
+          height={48}
+          className="rounded-full"
+        />
+        <div className="flex flex-col">
+          <Text className="font-medium">{site.name}</Text>
+          <Text size="sm" variant="secondary">
+            {site.subdomain}
+          </Text>
         </div>
-      ) : (
-        <Text className="px-6" variant="secondary">
-          No posts yet
-        </Text>
-      )}
-      <Divider />
-      <div className="px-6 pb-4">
-        <Text className="!leading-none" size="sm" variant="secondary">
-          Created {cpDayjs(site.createdAt).fromNow()}
-        </Text>
+        <SiteCardMenu site={site} />
+      </div>
+      <div className="mt-6">
+        <Text size="sm">Created {cpDayjs(site.createdAt).fromNow()}</Text>
       </div>
     </Card>
   );

diff --git a/packages/ui/src/blocks/user-menu/menu-link.tsx b/packages/ui/src/blocks/user-menu/menu-link.tsx
@@ -12,4 +12,4 @@ export const MenuLink = React.forwardRef(function MenuLink(
   );
 });
 
-export const itemStyle = `space-x-1`;
+export const itemStyle = 'flex flex-row gap-2 items-center';
diff --git a/packages/ui/src/blocks/user-menu/user-menu.tsx b/packages/ui/src/blocks/user-menu/user-menu.tsx
@@ -1,12 +1,11 @@
-import { SUPPORT_LINK, SIGN_IN_SUCCESS_KEY } from '@chirpy-dev/utils';
+import { SIGN_IN_SUCCESS_KEY, SUPPORT_LINK } from '@chirpy-dev/utils';
 import { signOut } from 'next-auth/react';
-import * as React from 'react';
 
 import { Avatar } from '../../components/avatar';
 import { IconLifeBuoy, IconLogOut, IconUser } from '../../components/icons';
 import { Menu } from '../../components/menu';
 import { useCurrentUser } from '../../contexts/current-user-context';
-import { itemStyle, MenuLink } from './menu-link';
+import { MenuLink } from './menu-link';
 
 export async function handleSignOut() {
   await signOut();
@@ -32,35 +31,26 @@ export function UserMenu(): JSX.Element {
       <Menu.Items className="min-w-[200px]" align="start">
         <Menu.Item
           as={MenuLink}
-          align="start"
           variant="plain"
           target="_blank"
           href={SUPPORT_LINK}
         >
-          <IconLifeBuoy size={14} />
+          <IconLifeBuoy size={16} />
           <span>Support</span>
         </Menu.Item>
         {isSignIn && (
           <>
-            <Menu.Item
-              as={MenuLink}
-              align="start"
-              variant="plain"
-              href="/profile"
-            >
-              <IconUser size={14} />
+            <Menu.Item as={MenuLink} variant="plain" href="/profile">
+              <IconUser size={16} />
               <span>Profile</span>
             </Menu.Item>
             <Menu.Divider />
             <Menu.Item
-              as="div"
-              align="start"
               disabled={!!process.env.NEXT_PUBLIC_MAINTENANCE_MODE}
-              className={itemStyle}
               onClick={handleSignOut}
             >
-              <IconLogOut size={14} />
-              <span className="w-max">Log out</span>
+              <IconLogOut size={16} />
+              <span>Log out</span>
             </Menu.Item>
           </>
         )}

diff --git a/packages/ui/src/components/heading/heading.tsx b/packages/ui/src/components/heading/heading.tsx
@@ -25,7 +25,7 @@ export function Heading(props: IHeadingProps): JSX.Element {
   return (
     <Component
       {...restProps}
-      className={clsx(`text-gray-1200`, styles[Component], className)}
+      className={clsx(className, `text-gray-1200`, styles[Component])}
     >
       {children}
     </Component>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,4 +12,4 @@ export const MenuLink = React.forwardRef(function MenuLink( @@
       );
     });
-    export const itemStyle = `space-x-1`;
+    export const itemStyle = 'flex flex-row gap-2 items-center';