more tweaks

replayio · Apr 28, 2024 · 6b86589 · 6b86589
1 parent 38cd1d9
commit 6b86589
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 31 deletions.
diff --git a/src/components/sections/DevTools.tsx b/src/components/sections/DevTools.tsx
@@ -58,7 +58,8 @@ export function DevTools({ devTools }: LandingPageFragment) {
             {devTools.title}
           </Title>
           <div className="mx-auto mt-4 max-w-3xl tracking-tight text-[#C1C3C7] opacity-100 md:text-lg">
-            <Description>{devTools.description}</Description>
+            {/* @ts-ignore */}
+            <Description {...devTools.description.json} />
           </div>
         </div>
 

diff --git a/src/components/sections/devtools/Description.tsx b/src/components/sections/devtools/Description.tsx
@@ -3,13 +3,14 @@ import { RichText, RichTextProps } from '.basehub/react-rich-text'
 import { fragmentOn } from '.basehub'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import Link from 'next/link'
+import { LinkFragment, PopoverFragment, descriptionFragment } from '~/lib/basehub-queries'
 
 export const DescriptionTooltip = ({
   children,
   body,
   learnMore
 }: {
-  learnMore: string | null
+  learnMore: LinkFragment | null
   body: string
   children: React.ReactNode
 }) => {
@@ -20,7 +21,7 @@ export const DescriptionTooltip = ({
         <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content
-            className={`borderPrimaryAccent max-w-64 select-none rounded-[4px] border-t-4 border-yellow-500 bg-slate-800 px-[15px] py-[10px] text-[15px] text-sm leading-relaxed text-slate-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade`}
+            className={`borderPrimaryAccent max-w-80 select-none rounded-[4px] border-t-4 border-blue-300 bg-slate-900 px-[15px] py-[10px] text-[15px] text-sm leading-relaxed text-slate-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade`}
             sideOffset={0}
             alignOffset={0}
             align="start"
@@ -29,65 +30,46 @@ export const DescriptionTooltip = ({
               <p>{body}</p>
               {learnMore && (
                 <div className="mt-2">
-                  <Link className="text-yellow-200 underline" href={learnMore}>
-                    Learn more
+                  <Link className="font-semibold text-slate-100 " href={learnMore.href}>
+                    {learnMore.label}
                   </Link>
                 </div>
               )}
             </div>
 
-            <Tooltip.Arrow className="fill-white" />
+            <Tooltip.Arrow className="fill-slate-900" />
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
     </Tooltip.Provider>
   )
 }
 
-const popoverFragment = fragmentOn('PopoverComponent', {
-  _id: true,
-  _title: true,
-  label: true,
-  body: true,
-  learnMore: true
-})
-
-type PopoverFragment = fragmentOn.infer<typeof popoverFragment>
-
 function Popover(props: PopoverFragment) {
   return (
     <span className="relative">
       <DescriptionTooltip body={props.body || ''} learnMore={props.learnMore}>
-        <span className="relative font-semibold hover:cursor-pointer hover:text-white ">
+        <span className="relative font-semibold hover:cursor-pointer hover:text-white/85 ">
           {props.label}
         </span>
       </DescriptionTooltip>
     </span>
   )
 }
 
-export const bodyFragment = fragmentOn('DescriptionRichText', {
-  content: true,
-  toc: true,
-  blocks: {
-    __typename: true,
-    on_PopoverComponent: popoverFragment
-  }
-})
-
-type BodyFragment = fragmentOn.infer<typeof bodyFragment>
+type BodyFragment = fragmentOn.infer<typeof descriptionFragment>
 
-export const Description = (props: RichTextProps<BodyFragment['blocks']>) => {
+export const Description = (props: BodyFragment) => {
   return (
     <div className="relative">
       <RichText
         blocks={props.blocks}
         components={{
-          PopoverComponent: Popover,
+          // @ts-ignore
           PopoverComponent_mark: Popover
         }}
       >
-        {props.children}
+        {props.content}
       </RichText>
     </div>
   )

diff --git a/src/lib/basehub-queries.ts b/src/lib/basehub-queries.ts
@@ -8,6 +8,25 @@ export const linkFragment = fragmentOn('LinkComponent', {
   variant: true
 })
 
+const popoverFragment = fragmentOn('PopoverComponent', {
+  _id: true,
+  _title: true,
+  label: true,
+  body: true,
+  learnMore: linkFragment
+})
+
+export type PopoverFragment = fragmentOn.infer<typeof popoverFragment>
+
+export const descriptionFragment = fragmentOn('DescriptionRichText', {
+  content: true,
+  toc: true,
+  blocks: {
+    __typename: true,
+    on_PopoverComponent: popoverFragment
+  }
+})
+
 export const landingPageFragment = fragmentOn('LandingPage', {
   hero: {
     getStartedLink: linkFragment,
@@ -48,7 +67,8 @@ export const landingPageFragment = fragmentOn('LandingPage', {
           _id: true,
           _title: true,
           label: true,
-          body: true
+          body: true,
+          learnMore: linkFragment
         }
       }
     },