diff options
| author | 2023-04-22 19:52:26 +0800 | |
|---|---|---|
| committer | 2023-04-22 19:52:26 +0800 | |
| commit | 4838df315931bb883f704ec3e1abe2685f296cdf (patch) | |
| tree | 57a8550c4cd5338f1126364bb518c6cde8d96e7d /docs/components/pages/home-shared/GradientSectionBorder.tsx | |
| parent | db74ade0234a40c2120ad5f2a41bee50ce13de02 (diff) | |
| download | HydroRoll-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.tsx | 37 |
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> + ); +} |
