feat: implement a quick add button (#223)

Co-authored-by: Andre Vitorio <andre@vitorio.net>
avitorio · Apr 20, 2024 · 506a070 · 506a070
1 parent 87dd328
commit 506a070
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 31 deletions.
diff --git a/.changeset/perfect-berries-battle.md b/.changeset/perfect-berries-battle.md
@@ -0,0 +1,5 @@
+---
+'outstatic': patch
+---
+
+Add new post button to sidebar
diff --git a/packages/outstatic/package.json b/packages/outstatic/package.json
@@ -35,6 +35,7 @@
     "@hookform/resolvers": "^2.9.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@tiptap/core": "2.1.10",
     "@tiptap/extension-bubble-menu": "2.1.10",
     "@tiptap/extension-code-block": "2.1.10",

diff --git a/packages/outstatic/src/components/Sidebar/index.tsx b/packages/outstatic/src/components/Sidebar/index.tsx
@@ -3,7 +3,15 @@ import { OUTSTATIC_VERSION } from '@/utils/constants'
 import generateUniqueId from '@/utils/generateUniqueId'
 import useOutstatic from '@/utils/hooks/useOutstatic'
 import cookies from 'js-cookie'
+import { Plus } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
+import { singular } from 'pluralize'
 
 type SidebarProps = {
   isOpen: boolean
@@ -89,8 +97,11 @@ const Sidebar = ({ isOpen = false }: SidebarProps) => {
           <>
             {collections.map((collection) => (
               <li key={collection}>
-                <Link href={`/outstatic/${collection}`}>
-                  <div className="flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100">
+                <div className="group w-full flex cursor-pointer items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-100">
+                  <Link
+                    href={`/outstatic/${collection}`}
+                    className="flex flex-grow items-center"
+                  >
                     <svg
                       className="h-6 w-6 shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900"
                       fill="none"
@@ -106,8 +117,31 @@ const Sidebar = ({ isOpen = false }: SidebarProps) => {
                       ></path>
                     </svg>
                     <span className="ml-3 capitalize">{collection}</span>
-                  </div>
-                </Link>
+                  </Link>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="z-10">
+                          <Link
+                            href={`/outstatic/${collection}/new`}
+                            className="hidden group-hover:block bg-white p-1 border border-gray-200 text-gray-500 rounded-sm hover:text-gray-700"
+                            aria-label='Create new item in collection "collection"'
+                          >
+                            <Plus strokeWidth={3} size={14} />
+                          </Link>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>
+                          Create new{' '}
+                          <span className="inline-block first-letter:uppercase">
+                            {singular(collection)}
+                          </span>
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
               </li>
             ))}
           </>

diff --git a/packages/outstatic/src/components/ui/tooltip.tsx b/packages/outstatic/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/utils/ui'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md bg-white px-3 py-1.5 text-xs text-primary animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }