konnosDashboard
SectionContent.tsx67 lines · main
1import { ExternalLink } from 'lucide-react'
2import Link from 'next/link'
3import { PropsWithChildren } from 'react'
4import { Badge } from 'ui'
5
6import { CategoryAttribute } from './Usage.constants'
7import { ScaffoldContainer, ScaffoldDivider } from '@/components/layouts/Scaffold'
8
9export interface SectionContent {
10 section: Pick<CategoryAttribute, 'name' | 'description' | 'links'>
11 includedInPlan?: boolean
12}
13
14export const SectionContent = ({
15 section,
16 includedInPlan,
17 children,
18}: PropsWithChildren<SectionContent>) => {
19 const { name, description, links } = section
20
21 return (
22 <>
23 <ScaffoldContainer>
24 <div className="mx-auto flex flex-col gap-10 py-8 md:py-16">
25 <div className="grid grid-cols-12 gap-6">
26 <div className="col-span-12 lg:col-span-5">
27 <div className="sticky top-32 space-y-6">
28 <div className="space-y-1">
29 <div className="flex items-center space-x-2">
30 <p className="text-base capitalize">{name}</p>
31 {includedInPlan === false && <Badge>Not included</Badge>}
32 </div>
33 <div className="grid gap-4">
34 {description.split('\n').map((value, idx) => (
35 <p key={`desc-${idx}`} className="text-sm text-foreground-light pr-8">
36 {value}
37 </p>
38 ))}
39 </div>
40 </div>
41 {links && links.length > 0 && (
42 <div className="space-y-2">
43 <p className="text-xs font-mono uppercase text-foreground-lighter mb-2">
44 More information
45 </p>
46 {links.map((link) => (
47 <div key={link.url}>
48 <Link href={link.url} target="_blank" rel="noreferrer">
49 <div className="inline-flex items-center space-x-2 text-foreground-light hover:text-foreground transition">
50 <p className="text-sm">{link.name}</p>
51 <ExternalLink size={16} strokeWidth={1.5} />
52 </div>
53 </Link>
54 </div>
55 ))}
56 </div>
57 )}
58 </div>
59 </div>
60 <div className="col-span-12 lg:col-span-7 space-y-6">{children}</div>
61 </div>
62 </div>
63 </ScaffoldContainer>
64 <ScaffoldDivider />
65 </>
66 )
67}