-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSection.tsx
More file actions
105 lines (96 loc) · 2.34 KB
/
Section.tsx
File metadata and controls
105 lines (96 loc) · 2.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
"use client";
import { Color } from "@/config/colors";
import { DESKTOP_MIN_WIDTH } from "@/utils/const";
import { useWindow } from "@/utils/hooks/window";
import { HTMLMotionProps, motion } from "framer-motion";
import { forwardRef } from "react";
import { twMerge } from "tailwind-merge";
type SectionProps = HTMLMotionProps<"section"> & {
children: React.ReactNode;
px?: boolean;
py?: boolean;
pt?: boolean;
pb?: boolean;
pl?: boolean;
pr?: boolean;
bg?: Color;
align?: "left" | "center" | "right";
hiddenSection?: boolean;
mobileScreen?: boolean;
};
export const Section = forwardRef<HTMLElement, SectionProps>(
(
{
children,
px = true,
py = true,
pt,
pb,
pl,
pr,
bg = "dark",
align = "left",
className,
style,
hiddenSection = false,
mobileScreen = false,
...props
},
ref,
) => {
const { height, width } = useWindow();
const bgColors: { [key in Color]: string } = {
red: "bg-red-500",
dark: "bg-dark-700",
light: "bg-light-500",
transparent: "bg-transparent",
};
const navigationColors: { [key in Color]: string } = {
red: "red",
dark: "dark",
light: "light",
transparent: "light",
};
const alignItems = {
left: "place-items-start",
center: "place-items-center",
right: "place-items-end",
};
return (
<motion.section
{...props}
ref={ref}
data-visibility={hiddenSection ? "hidden" : "visible"}
data-color={navigationColors[bg]}
className={twMerge(
"z-0 grid grid-cols-1 grid-rows-1 transition-all duration-200 ease-in-out lg:relative lg:h-screen",
bgColors[bg],
alignItems[align],
"border-red-500",
// y-axis
py && "py-page",
pt && "pt-page",
pb && "pb-page",
// x -axis
px && "px-page",
pl && "pl-page",
pr && "pr-page",
className,
)}
style={{
height:
parseInt(width.toString()) > DESKTOP_MIN_WIDTH
? height
: mobileScreen
? "100vh"
: "auto",
...style,
}}
>
{children}
</motion.section>
);
},
);
Section.displayName = "Section";
export default Section;