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
+} // 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;
}