byarielm.fyi
ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
1import React from "react";
2
3interface SectionProps {
4 title: string;
5 description?: string;
6 children: React.ReactNode;
7 divider?: boolean;
8 className?: string;
9 action?: React.ReactNode;
10}
11
12const Section: React.FC<SectionProps> = ({
13 title,
14 description,
15 children,
16 divider = false,
17 className = "",
18 action,
19}) => {
20 const containerClasses = divider
21 ? "p-6 border-b-2 border-cyan-500/30 dark:border-purple-500/30"
22 : "p-6";
23
24 return (
25 <div className={`${containerClasses} ${className}`}>
26 <div className="flex items-start justify-between mb-4">
27 <div className="flex items-center space-x-3">
28 <div>
29 <h2 className="text-xl font-bold text-purple-950 dark:text-cyan-50">
30 {title}
31 </h2>
32 {description && (
33 <p className="text-sm text-purple-750 dark:text-cyan-250">
34 {description}
35 </p>
36 )}
37 </div>
38 </div>
39 {action && <div>{action}</div>}
40 </div>
41 {children}
42 </div>
43 );
44};
45
46export default Section;