Merge pull request #97 from FilOzone/UXIT-3662/tw-prose

Enhance Faq component with dark mode support and layout constraints

Author: CharlyMartin

package-lock.json

@@ -11,7 +11,7 @@
     "format": "biome format --write ."
   },
   "dependencies": {
-    "@filecoin-foundation/ui-filecoin": "^0.1.11",
+    "@filecoin-foundation/ui-filecoin": "^0.1.12",
     "@filoz/synapse-sdk": "^0.35.3",
     "@headlessui/react": "^2.2.9",
     "@phosphor-icons/react": "^2.1.10",

package.json

@@ -1,4 +1,5 @@
 import type { Question } from '@/components/Faq'
+import { MarkdownLink } from '@/components/TextLink/MarkdownLink'
 
 import { FOC_URLS } from '@/constants/site-metadata'
 
@@ -9,9 +10,9 @@ export const faqs: Array<Question> = [
       <>
         <p>
           Start with the{' '}
-          <a href={FOC_URLS.warmStorageService.synapseSdk}>
+          <MarkdownLink href={FOC_URLS.warmStorageService.synapseSdk}>
             Filecoin Synapse SDK
-          </a>{' '}
+          </MarkdownLink>{' '}
           to access Filecoin Onchain Cloud flagship services. Upload, retrieve,
           and verify files in just a few lines of code, test everything on
           calibration, then switch to mainnet by pointing your SDK to the
@@ -102,14 +103,22 @@ export const faqs: Array<Question> = [
           </li>
           <li>
             <strong>Transparent rankings:</strong>{' '}
-            <a href="https://dealbot-ga.fwss.io/">Storage</a> and{' '}
-            <a href="https://github.com/filbeam/bot">retrieval</a> deal checkers
-            continuously test retrievals across the network, executing real
-            deals with providers to track latency, success rates, and
-            throughput.{' '}
-            <a href="https://dashboard.filbeam.com/">Public dashboards</a> ranks
-            providers by performance, giving builders transparent benchmarks and
-            helping the retrieval market' stay competitive and accountable.
+            <MarkdownLink href="https://dealbot-ga.fwss.io/">
+              Storage
+            </MarkdownLink>{' '}
+            and{' '}
+            <MarkdownLink href="https://github.com/filbeam/bot">
+              retrieval
+            </MarkdownLink>{' '}
+            deal checkers continuously test retrievals across the network,
+            executing real deals with providers to track latency, success rates,
+            and throughput.{' '}
+            <MarkdownLink href="https://dashboard.filbeam.com/">
+              Public dashboards
+            </MarkdownLink>{' '}
+            ranks providers by performance, giving builders transparent
+            benchmarks and helping the retrieval market' stay competitive and
+            accountable.
           </li>
         </ul>
       </>
@@ -149,16 +158,16 @@ export const faqs: Array<Question> = [
         <ul>
           <li>
             Join the{' '}
-            <a href={FOC_URLS.social.telegram}>
+            <MarkdownLink href={FOC_URLS.social.telegram}>
               FOC Builders group on Telegram
-            </a>{' '}
+            </MarkdownLink>{' '}
             to ask questions and get support.
           </li>
           <li>
             Jump into the{' '}
-            <a href={FOC_URLS.social.slack}>
+            <MarkdownLink href={FOC_URLS.social.slack}>
               #FIL-FOC channel on Filecoin Slack
-            </a>
+            </MarkdownLink>
             .
           </li>
           <li>

src/app/hidden/(homepage)/data/faqs.tsx

@@ -1,4 +1,8 @@
+'use client'
+
+import { useBackgroundVariant } from '@filecoin-foundation/ui-filecoin/Section/Section'
 import { SectionContent } from '@filecoin-foundation/ui-filecoin/SectionContent'
+import { clsx } from 'clsx'
 
 import { Accordion } from './Accordion'
 
@@ -12,22 +16,28 @@ type FaqProps = {
 }
 
 export function Faq({ questions }: FaqProps) {
+  const backgroundVariant = useBackgroundVariant()
+  const isDark =
+    backgroundVariant === 'dark' || backgroundVariant === 'transparentDark'
+
   return (
-    <SectionContent title="Frequently asked questions">
-      <Accordion
-        type="single"
-        collapsible
-        className="divide-y divide-white/20 prose-invert"
-      >
-        {questions.map(({ question, answer }) => {
-          return (
-            <Accordion.Item key={question} value={question} className="py-4">
-              <Accordion.Trigger>{question}</Accordion.Trigger>
-              <Accordion.Content>{answer}</Accordion.Content>
-            </Accordion.Item>
-          )
-        })}
-      </Accordion>
-    </SectionContent>
+    <div className="max-w-4xl">
+      <SectionContent title="Frequently asked questions">
+        <Accordion type="single" collapsible className="divide-white/20">
+          {questions.map(({ question, answer }) => {
+            return (
+              <Accordion.Item key={question} value={question} className="py-4">
+                <Accordion.Trigger>{question}</Accordion.Trigger>
+                <Accordion.Content
+                  className={clsx('prose max-w-none', isDark && 'prose-invert')}
+                >
+                  {answer}
+                </Accordion.Content>
+              </Accordion.Item>
+            )
+          })}
+        </Accordion>
+      </SectionContent>
+    </div>
   )
 }

src/components/Faq.tsx

@@ -0,0 +1,21 @@
+import { MarkdownLink as SharedMarkdownLink } from '@filecoin-foundation/ui-filecoin/Markdown/MarkdownLink'
+import type { SmartTextLinkProps } from '@filecoin-foundation/ui-filecoin/TextLink/SmartTextLink'
+import Link from 'next/link'
+
+import { BASE_DOMAIN } from '@/constants/site-metadata'
+
+type MarkdownLinkProps = Omit<
+  SmartTextLinkProps,
+  'baseDomain' | 'InternalLinkComponent'
+>
+
+export function MarkdownLink(props: MarkdownLinkProps) {
+  return (
+    <SharedMarkdownLink
+      {...props}
+      baseDomain={BASE_DOMAIN}
+      // @ts-expect-error: Types of property 'href' are incompatible: string vs RouteImpl | UrlObject
+      InternalLinkComponent={Link}
+    />
+  )
+}