konnosDashboard
MarkdownContent.tsx63 lines · main
1import { motion } from 'framer-motion'
2import { useEffect, useState } from 'react'
3import { cn } from 'ui'
4
5import { Markdown } from '@/components/interfaces/Markdown'
6
7const CHAR_LIMIT = 500 // Adjust this number as needed
8
9export const MarkdownContent = ({
10 integrationId,
11 initiallyExpanded,
12}: {
13 integrationId: string
14 initiallyExpanded?: boolean
15}) => {
16 const [content, setContent] = useState<string>('')
17 const [isExpanded, setIsExpanded] = useState(initiallyExpanded ?? false)
18
19 useEffect(() => {
20 import(`@/static-data/integrations/${integrationId}/overview.md`)
21 .then((module) => setContent(String(module.default)))
22 .catch((error) => console.error('Error loading markdown:', error))
23 }, [integrationId])
24
25 const displayContent = isExpanded ? content : content.slice(0, CHAR_LIMIT)
26 const supportExpanding = content.length > CHAR_LIMIT || (content.match(/\n/g) || []).length > 1
27
28 if (displayContent.length === 0) return null
29
30 return (
31 <div className="px-10">
32 <div className="relative">
33 <motion.div
34 initial={false}
35 animate={{ height: isExpanded ? 'auto' : 80 }}
36 className="overflow-hidden"
37 transition={{ duration: 0.4 }}
38 >
39 <Markdown content={displayContent} className="max-w-3xl!" />
40 </motion.div>
41 {!isExpanded && (
42 <div
43 className={cn(
44 'bottom-0 left-0 right-0 h-24',
45 supportExpanding && 'bg-linear-to-t from-background-200 to-transparent',
46 !isExpanded ? 'absolute' : 'relative'
47 )}
48 />
49 )}
50 {supportExpanding && (
51 <div className={cn('bottom-0', !isExpanded ? 'absolute' : 'relative mt-3')}>
52 <button
53 className="text-foreground-light hover:text-foreground underline text-sm"
54 onClick={() => setIsExpanded(!isExpanded)}
55 >
56 {isExpanded ? 'Show less' : 'Read more'}
57 </button>
58 </div>
59 )}
60 </div>
61 </div>
62 )
63}