aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/pages/home-shared/GradientSectionBorder.tsx
diff options
context:
space:
mode:
authorHsiangNianian <admin@jyunko.cn>2023-04-22 19:52:26 +0800
committerHsiangNianian <admin@jyunko.cn>2023-04-22 19:52:26 +0800
commit4838df315931bb883f704ec3e1abe2685f296cdf (patch)
tree57a8550c4cd5338f1126364bb518c6cde8d96e7d /docs/components/pages/home-shared/GradientSectionBorder.tsx
parentdb74ade0234a40c2120ad5f2a41bee50ce13de02 (diff)
downloadHydroRoll-4838df315931bb883f704ec3e1abe2685f296cdf.tar.gz
HydroRoll-4838df315931bb883f704ec3e1abe2685f296cdf.zip
😀
Diffstat (limited to 'docs/components/pages/home-shared/GradientSectionBorder.tsx')
-rw-r--r--docs/components/pages/home-shared/GradientSectionBorder.tsx37
1 files changed, 37 insertions, 0 deletions
diff --git a/docs/components/pages/home-shared/GradientSectionBorder.tsx b/docs/components/pages/home-shared/GradientSectionBorder.tsx
new file mode 100644
index 0000000..ef1e824
--- /dev/null
+++ b/docs/components/pages/home-shared/GradientSectionBorder.tsx
@@ -0,0 +1,37 @@
+import cn from "classnames";
+import { FadeIn } from "./FadeIn";
+import gradients from "../home-shared/gradients.module.css";
+
+export function GradientSectionBorder({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+ <section className={cn("relative overflow-hidden")}>
+ <FadeIn noVertical viewTriggerOffset>
+ <span
+ className={cn(
+ "w-full absolute white h-[1px] top-0 opacity-25",
+ gradients.gradientSectionBorderDivider
+ )}
+ />
+ <span
+ className={cn(
+ gradients.gradientSectionBorder,
+ gradients.gradientSectionBorderLeft,
+ "dark:opacity-35 opacity-[0.15]"
+ )}
+ />
+ <span
+ className={cn(
+ gradients.gradientSectionBorder,
+ gradients.gradientSectionBorderRight,
+ "dark:opacity-35 opacity-[0.15]"
+ )}
+ />
+ </FadeIn>
+ {children}
+ </section>
+ );
+}