diff --git a/app/layout.tsx b/app/layout.tsx index e2d9c34..4fd0f62 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout({ return ( - + <>{children} diff --git a/app/page.tsx b/app/page.tsx index d26a84b..bb05402 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,7 @@ export default function Home() { return (
- +
); } diff --git a/component/common/HorizGallery.tsx b/component/common/HorizGallery.tsx new file mode 100644 index 0000000..8e3111d --- /dev/null +++ b/component/common/HorizGallery.tsx @@ -0,0 +1,10 @@ +import DefaultProps from "@/utils/DefaultProps"; + +export default HorizGallery; + +function HorizGallery({children, styl}: DefaultProps) { + + return
+ {children} +
+} // HroizGallery \ No newline at end of file diff --git a/component/feature/featureComps.tsx b/component/feature/featureComps.tsx index d353182..6b8f3ab 100644 --- a/component/feature/featureComps.tsx +++ b/component/feature/featureComps.tsx @@ -25,6 +25,7 @@ export function EffectComp({ // pre-rendering area const index: string = prop0.toString(); + if (!data) return <>; const tailname: TailProperties = { box: "w-16 h-16", bg_border: "bg-white", diff --git a/component/layout/TopBar.tsx b/component/layout/TopBar.tsx index 98afd29..cba9ab8 100644 --- a/component/layout/TopBar.tsx +++ b/component/layout/TopBar.tsx @@ -1,23 +1,50 @@ +"use client"; + import DefaultProps from "@/utils/DefaultProps"; import TailProperties, { TailClassName } from "@/styles/TailProperties"; +import { CSSProperties, useEffect } from "react"; -const TopBarData = { - title: "next template", - desc: "desc of layout", -}; -export default function TopBar({ - data, - className, -}: DefaultProps) { - const { title, desc }: typeof TopBarData = data; +interface TopBarProps extends DefaultProps { + height: number; + constraint: number; +} // TopBarProps +export default function TopBar({ height, constraint, className }: TopBarProps) { + useEffect((): void => { + const topbar: HTMLElement | null = document.getElementById(topbarId); + if (topbar) { + topbar.style.height = `${height}px`; + topbar.style.transition = "height 0.75s ease-in-out"; + window.addEventListener("scroll", (): void => { + if (window.scrollY > 0) + topbar.style.height = `${height - constraint}px`; + else topbar.style.height = `${height}px`; + }); // window + } // if + }, []); + const topbarId: string = "top-bar"; const tailname: TailProperties = { - box: "w-full h-16", - bg_border: "bg-blue text-white", + box: "w-full px-4", + bg_border: "bg-black text-slate-500", + layout: "grid", + etc: "fixed top-0 left-0", + anime_transit: "transition-height", + }; + const layer: CSSProperties = { + width: "100%", + height: `${height}px`, }; return ( -
- {title + " - " + desc} +
+
+
+
+
+
); } diff --git a/styles/TailProperties.ts b/styles/TailProperties.ts index d29f08e..cf15707 100644 --- a/styles/TailProperties.ts +++ b/styles/TailProperties.ts @@ -10,6 +10,14 @@ export default interface TailProperties { etc?: string; } -export function TailClassName(tailwindProperties: TailProperties) { - return `${tailwindProperties.position} ${tailwindProperties.bg_border} ${tailwindProperties.box} ${tailwindProperties.layout} ${tailwindProperties.typo} ${tailwindProperties.anime_transit} ${tailwindProperties.transform} ${tailwindProperties.interact}`; +export function TailClassName(properties: TailProperties): string { + return `${properties.position ?? properties.position} ${ + properties.bg_border ?? properties.bg_border + } ${properties.box ?? properties.box} ${ + properties.layout ?? properties.layout + } ${properties.typo ?? properties.typo} ${ + properties.anime_transit ?? properties.anime_transit + } ${properties.transform ?? properties.transform} ${ + properties.interact ?? properties.interact + } ${properties.etc ?? properties.etc}`; } diff --git a/utils/DefaultProps.ts b/utils/DefaultProps.ts index 16fe502..358fb95 100644 --- a/utils/DefaultProps.ts +++ b/utils/DefaultProps.ts @@ -3,6 +3,6 @@ export default interface DefaultProps { id?: string; title?: string; children?: any; - data: T; + data?: T; onClick?: (parm: any) => any; }