section.tsx (1553B)
1 import React from "react"; 2 import { useTheme } from "../layout"; 3 4 export const Section = ({ children, color = "", className = "" }) => { 5 const theme = useTheme(); 6 const sectionColor = { 7 default: 8 "text-gray-800 dark:text-gray-50 bg-gradient-to-tl from-gray-50 dark:from-gray-900 via-transparent to-transparent", 9 tint: "text-gray-900 dark:text-gray-100 bg-gradient-to-br from-gray-100 dark:from-gray-1000 to-transparent", 10 primary: { 11 blue: "text-white bg-blue-500 bg-gradient-to-br from-blue-500 to-blue-600", 12 teal: "text-white bg-teal-500 bg-gradient-to-br from-teal-500 to-teal-600", 13 green: 14 "text-white bg-green-600 bg-gradient-to-br from-green-600 to-green-700", 15 red: "text-white bg-red-500 bg-gradient-to-br from-red-500 to-red-600", 16 pink: "text-white bg-pink-500 bg-gradient-to-br from-pink-500 to-pink-600", 17 purple: 18 "text-white bg-purple-500 bg-gradient-to-br from-purple-500 to-purple-600", 19 orange: 20 "text-white bg-orange-500 bg-gradient-to-br from-orange-500 to-orange-600", 21 yellow: 22 "text-white bg-yellow-500 bg-gradient-to-br from-yellow-500 to-yellow-600", 23 }, 24 }; 25 const sectionColorCss = 26 color === "primary" 27 ? sectionColor.primary[theme.color] 28 : sectionColor[color] 29 ? sectionColor[color] 30 : sectionColor.default; 31 32 return ( 33 <section 34 className={`flex-1 relative transition duration-150 ease-out body-font overflow-hidden ${sectionColorCss} ${className}`} 35 > 36 {children} 37 </section> 38 ); 39 };