35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import React from "react";
|
|
|
|
export const Section = ({ children, color = "", className = "" }) => {
|
|
const sectionColor = {
|
|
default:
|
|
"text-gray-800 dark:text-gray-50 bg-gradient-to-tl from-gray-50 dark:from-gray-900 via-transparent to-transparent",
|
|
tint: "text-gray-900 dark:text-gray-100 bg-gradient-to-br from-gray-100 dark:from-gray-1000 to-transparent",
|
|
primary: {
|
|
blue: "text-white bg-blue-500 bg-gradient-to-br from-blue-500 to-blue-600",
|
|
teal: "text-white bg-teal-500 bg-gradient-to-br from-teal-500 to-teal-600",
|
|
green:
|
|
"text-white bg-green-600 bg-gradient-to-br from-green-600 to-green-700",
|
|
red: "text-white bg-red-500 bg-gradient-to-br from-red-500 to-red-600",
|
|
pink: "text-white bg-pink-500 bg-gradient-to-br from-pink-500 to-pink-600",
|
|
purple:
|
|
"text-white bg-purple-500 bg-gradient-to-br from-purple-500 to-purple-600",
|
|
orange:
|
|
"text-white bg-orange-500 bg-gradient-to-br from-orange-500 to-orange-600",
|
|
yellow:
|
|
"text-white bg-yellow-500 bg-gradient-to-br from-yellow-500 to-yellow-600"
|
|
}
|
|
};
|
|
const sectionColorCss = sectionColor[color]
|
|
? sectionColor[color]
|
|
: sectionColor.default;
|
|
|
|
return (
|
|
<section
|
|
className={ `flex-1 relative transition duration-150 ease-out body-font overflow-hidden ${ sectionColorCss } ${ className }` }
|
|
>
|
|
{ children }
|
|
</section>
|
|
);
|
|
};
|