-
Notifications
You must be signed in to change notification settings - Fork 52
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: move content and toc in a single component
- Loading branch information
Showing
4 changed files
with
83 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| 'use client' | ||
|
|
||
| import React from 'react' | ||
| import { components } from '@/components/MDXComponents' | ||
| import { MDXLayoutRenderer } from 'pliny/mdx-components' | ||
| import PageFeedback from '../PageFeedback/PageFeedback' | ||
| import DocsPrevNext from '../DocsPrevNext/DocsPrevNext' | ||
| import TableOfContents from '../DocsTOC/DocsTOC' | ||
| import TrySigNozFloatingCard from '../TrySigNozFloatingCard/TrySigNozFloatingCard' | ||
| import { QUERY_PARAMS } from '@/constants/queryParams' | ||
| import { useSearchParams } from 'next/navigation' | ||
| import { ONBOARDING_SOURCE } from '@/constants/globals' | ||
|
|
||
| const DocContent: React.FC<{ | ||
| title: string | ||
| post: any | ||
| toc: any | ||
| hideTableOfContents: boolean | ||
| }> = ({ title, post, toc, hideTableOfContents }) => { | ||
| const searchParams = useSearchParams() | ||
| const source = searchParams.get(QUERY_PARAMS.SOURCE) | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={`doc-content ${source === ONBOARDING_SOURCE ? 'product-onboarding' : ''}`}> | ||
| <h2 className="mt-2 text-3xl">{title}</h2> | ||
| <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc || []} /> | ||
| <PageFeedback /> | ||
| <DocsPrevNext /> | ||
| </div> | ||
|
|
||
| {!hideTableOfContents && ( | ||
| <TableOfContents | ||
| toc={toc} | ||
| hideTableOfContents={hideTableOfContents} | ||
| source={source || ''} | ||
| /> | ||
| )} | ||
| <TrySigNozFloatingCard source={source || ''} /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default DocContent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 28 additions & 25 deletions
53
components/TrySigNozFloatingCard/TrySigNozFloatingCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,51 @@ | ||
| 'use client'; | ||
| 'use client' | ||
|
|
||
| import React, { useState, useEffect } from 'react'; | ||
| import Link from 'next/link'; | ||
| import { ArrowRight, X } from 'lucide-react'; | ||
| import React, { useState, useEffect } from 'react' | ||
| import Link from 'next/link' | ||
| import { ArrowRight, X } from 'lucide-react' | ||
| import { ONBOARDING_SOURCE } from '@/constants/globals' | ||
|
|
||
| const TrySigNozFloatingCard: React.FC = () => { | ||
| const [isVisible, setIsVisible] = useState(true); | ||
| const TrySigNozFloatingCard: React.FC<{ source: string }> = ({ source }) => { | ||
| const [isVisible, setIsVisible] = useState(true) | ||
|
|
||
| useEffect(() => { | ||
| const cardClosed = localStorage.getItem('trySigNozCardClosed'); | ||
| const cardClosed = localStorage.getItem('trySigNozCardClosed') | ||
| if (cardClosed) { | ||
| setIsVisible(false); | ||
| setIsVisible(false) | ||
| } | ||
| }, []); | ||
| }, []) | ||
|
|
||
| const handleClose = () => { | ||
| setIsVisible(false); | ||
| localStorage.setItem('trySigNozCardClosed', 'true'); | ||
| }; | ||
| setIsVisible(false) | ||
| localStorage.setItem('trySigNozCardClosed', 'true') | ||
| } | ||
|
|
||
| if (!isVisible) return null; | ||
| if (!isVisible || source === ONBOARDING_SOURCE) return null | ||
|
|
||
| return ( | ||
| <div className="fixed bottom-8 right-8 w-64 bg-gradient-to-r from-gray-800 to-gray-900 rounded-xl px-4 py-6 shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1 hidden lg:block"> | ||
| <div className="fixed bottom-8 right-8 hidden w-64 transform rounded-xl bg-gradient-to-r from-gray-800 to-gray-900 px-4 py-6 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-1 hover:shadow-xl lg:block"> | ||
| <button | ||
| onClick={handleClose} | ||
| className="absolute top-2 right-2 text-gray-400 hover:text-white" | ||
| className="absolute right-2 top-2 text-gray-400 hover:text-white" | ||
| aria-label="Close" | ||
| > | ||
| <X size={16} /> | ||
| </button> | ||
| <h3 className="text-lg font-bold text-white mt-0 mb-2">Try SigNoz Cloud for FREE</h3> | ||
| <p className="text-gray-300 text-sm mb-3">Instant setup, predictable pricing, and advanced features without infrastructure hassles.</p> | ||
| <Link | ||
| id='try-signoz-cloud-floating-card-cta' | ||
| href="/teams/" | ||
| style={{color: 'white', textDecoration: 'none'}} | ||
| className="inline-block bg-signoz_robin-500 hover:bg-signoz_robin-600 text-white px-4 py-2 mt-6 rounded-lg text-sm font-semibold transition-colors duration-300 flex items-center justify-between" | ||
| <h3 className="mb-2 mt-0 text-lg font-bold text-white">Try SigNoz Cloud for FREE</h3> | ||
| <p className="mb-3 text-sm text-gray-300"> | ||
| Instant setup, predictable pricing, and advanced features without infrastructure hassles. | ||
| </p> | ||
| <Link | ||
| id="try-signoz-cloud-floating-card-cta" | ||
| href="/teams/" | ||
| style={{ color: 'white', textDecoration: 'none' }} | ||
| className="mt-6 inline-block flex items-center justify-between rounded-lg bg-signoz_robin-500 px-4 py-2 text-sm font-semibold text-white transition-colors duration-300 hover:bg-signoz_robin-600" | ||
| > | ||
| <span>Get Started</span> | ||
| <ArrowRight size={16} /> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| }; | ||
| ) | ||
| } | ||
|
|
||
| export default TrySigNozFloatingCard; | ||
| export default TrySigNozFloatingCard |