@chtc/web-components 0.0.0-3 → 0.0.0-31

package/src/layout/Header/Header.tsx

@@ -1,54 +0,0 @@
-'use client'
-
-import {useState, useEffect, ReactNode} from "react";
-import {Box, Typography} from "@mui/material"
-import styles from "../../../app/page.module.css"
-import Link from "next/link";
-
-import {MenuProps} from "./index.d";
-import {BurgerMenu, DesktopMenu, ImageIcon} from "./index";
-
-export interface HeaderProps {
-	icon: ReactNode,
-	title: string,
-	menuItems: MenuProps[]
-}
-
-export const Header = ({icon, title, menuItems}: HeaderProps) => {
-
-	// Scroll watcher for opacity
-	let [scrolledTop, setScrolledTop] = useState(true);
-	useEffect(() => {
-		setScrolledTop(window.scrollY < 50);
-		addEventListener("scroll", (event) => {
-			setScrolledTop(window.scrollY < 50);
-		});
-	}, [])
-
-	return (
-			<Box className={`${styles.header} ${scrolledTop ? styles.headerScrolled : ""}`} style={{
-				display: "flex",
-				justifyContent: "space-between",
-				padding: "1rem",
-				position: "fixed",
-				zIndex: "1",
-				width: "100%",
-				overflow: "hidden"
-			}}>
-				<Box display={"flex"} flexGrow={1}>
-					<Link href={"/"}>
-						<Box style={{display: "flex"}}>
-							{icon}
-							<Typography variant={"h5"} pl={1} my={"auto"}>{title}</Typography>
-						</Box>
-					</Link>
-					<Box sx={{display: {xs: "flex", "md": "none"}}} flexGrow={1}>
-						<BurgerMenu menuItems={menuItems}/>
-					</Box>
-					<Box sx={{display: {xs: "none", "md": "flex"}}} flexGrow={1}>
-						<DesktopMenu menuItems={menuItems}/>
-					</Box>
-				</Box>
-			</Box>
-	)
-}

package/src/layout/Header/HeaderDropdown.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import React, { ReactNode, useState } from "react";
-import {Typography, ListItemButton, ListItemIcon, Collapse} from "@mui/material";
-import Link, {LinkProps} from "next/link";
-import { ExpandLess, ExpandMore} from "@mui/icons-material";
-
-interface HeaderLinkProps extends LinkProps {
-    value: string
-    icon: ReactNode
-    target?: string
-    onClick: () => void
-}
-  
-export const HeaderLink = ({ value, href, icon, target, onClick }: HeaderLinkProps) => {
-    return (
-        <ListItemButton
-        onClick={onClick}>
-            <ListItemIcon sx={{ marginRight: "-0.8em", fontSize:"1.5em", marginLeft: "1em" }}>
-                {icon}
-            </ListItemIcon>
-            <Typography variant="h6">
-                <Link href={href} target={target}>
-                    {value}
-                </Link>
-            </Typography>
-        </ListItemButton>
-    )
-}
-
-export const HeaderMainLink = ({ value, href, icon, target, onClick }: HeaderLinkProps) => {
-    return (
-        <ListItemButton
-          onClick={onClick}
-        >
-            <ListItemIcon sx={{ marginRight: "-0.8em", fontSize: "2em" }}>
-                {icon}
-            </ListItemIcon>
-            <Typography variant="h5">
-                <Link href={href} target={target}>
-                    {value}
-            </Link>
-            </Typography>
-        </ListItemButton>
-    )
-}
-
-export const HeaderDropdown = ({ value, children, icon }: { value: string, children: ReactNode, icon: ReactNode}) => {
-    const [openState, setOpenState] = useState(false);
-    const handleClick = () => {
-        setOpenState(!openState);
-    };
-
-    return (
-        <>
-            <ListItemButton onClick={handleClick}>
-                <ListItemIcon sx={{ marginRight: "-0.8em", fontSize: "2em"  }}>
-                    {icon}
-                </ListItemIcon>
-                <Typography variant="h5">
-                    {value}
-                </Typography>
-                {openState ? <ExpandLess sx={{ marginLeft: "1em" }} /> : <ExpandMore sx={{ marginLeft: "0.5em" }} />}
-            </ListItemButton>
-            <Collapse in={openState} timeout="auto" unmountOnExit>
-                {children}
-            </Collapse>
-        </>
-    )
-}
-

package/src/layout/Header/HeaderItem.tsx

@@ -1,110 +0,0 @@
-import React, {useRef, useEffect, useState} from "react";
-import Link from "next/link";
-import {Box, Menu, MenuItem, Tooltip, Typography} from "@mui/material";
-import {ArrowDropDown, ArrowDropUp} from "@mui/icons-material";
-
-import type {HeaderLinkItem, HeaderMenuProps, MenuProps} from "./index";
-
-export const HeaderItem = ({...props}: HeaderMenuProps | HeaderLinkItem) => {
-	if("menuItems" in props) {
-		return <HeaderMenu {...props} />
-	} else if(props.type == "text") {
-		return <HeaderLink {...props} />
-	} else {
-		return <HeaderIconLink {...props} />
-	}
-}
-
-const HeaderMenu = ({icon, value, open, setAnchor, menuItems}: HeaderMenuProps) => {
-
-	const anchorRef = useRef<HTMLElement>(null)
-
-	// Effect to perform actions when ref changes
-	const [refChange, setRefChange] = useState<number>(0); // State to track ref changes
-	useEffect(() => {
-		setRefChange(refChange + 1);
-	}, [anchorRef.current]); // Dependency on refChange state to trigger effect
-
-	return (
-			<>
-				<Box style={{display: "flex"}}
-							ref={anchorRef}
-							aria-controls={open ? `${value}-menu` : undefined}
-							aria-haspopup="true"
-							aria-expanded={open ? 'true' : undefined}
-							onClick={e => setAnchor(anchorRef.current)}
-				>
-					<Typography id={`${value}-header`} display={"flex"} my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
-						<Box display={"inline"} my={"auto"}>
-							{value}
-						</Box>
-						{open ?
-								<ArrowDropUp /> :
-								<ArrowDropDown />
-						}
-					</Typography>
-				</Box>
-				<Menu
-						anchorEl={anchorRef.current}
-						open={open}
-						onClose={() => setAnchor(null)}
-						sx={{mt: 2}}
-						anchorOrigin={{
-							vertical: 'bottom',
-							horizontal: 'left',
-						}}
-						transformOrigin={{
-							vertical: 'top',
-							horizontal: 'left',
-						}}
-				>
-					{menuItems.map((item) => (
-							<Link key={item.value} {...item} style={{textDecoration: "none", ...item.style}}>
-								<MenuItem onClick={e => setAnchor(anchorRef.current)}>{item.value}</MenuItem>
-							</Link>
-					))}
-				</Menu>
-			</>
-	)
-}
-
-const HeaderLink = ({...props} : HeaderLinkItem) => {
-	return (
-			<Link {...props} style={{display: "flex", textDecoration: "none", ...props.style}} >
-				<Typography my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
-					{props.value}
-				</Typography>
-			</Link>
-	)
-}
-
-const HeaderIconLink = ({...props} : HeaderLinkItem) => {
-	return (
-			<Link href={props.href} target={props.target}>
-				<Tooltip title={props.value}>
-					<Box
-							sx={{
-								":hover": {
-									transform: "scale(1.15)",
-									transition: "transform 0.3s",
-								},
-								marginTop: "2px"
-							}}
-					>
-						{
-							React.cloneElement(props.icon, {
-								fontSize: "large",
-								sx:{
-									":hover": {
-										transform: "scale(1.15)",
-										transition: "transform 0.3s",
-									},
-									marginTop: "2px"
-								}
-							})
-						}
-					</Box>
-				</Tooltip>
-			</Link>
-	)
-}

package/src/layout/Header/ImageIcon.tsx

@@ -1 +0,0 @@
-export const ImageIcon = ({ src, alt }: { src: string, alt: string }) => <img src={src} alt={alt} style={{ width: '24px', height: '24px' }} />;

package/src/layout/Header/index.ts

@@ -1,25 +0,0 @@
-import {ReactNode} from "react";
-import {LinkProps} from "next/link";
-
-export * from './Header';
-export * from './HeaderItem';
-export * from "./BurgerMenu"
-export * from "./ImageIcon"
-export * from "./DesktopMenu"
-
-export type MenuProps = Omit<HeaderMenuProps, "setAnchor" | "anchorEl"> | HeaderLinkItem
-
-interface HeaderMenuProps {
-	icon: ReactNode
-	value: string
-	anchorEl: HTMLElement | null
-	setAnchor: (x: HTMLElement | null) => void
-	menuItems: HeaderLinkItem[]
-}
-
-interface HeaderLinkItem extends LinkProps {
-	icon: ReactNode
-	value: string
-	target?: "_self" | "_blank"
-	type?: "icon" | "text"
-}

package/src/layout/index.ts

@@ -1 +0,0 @@
-export * from './Header';