Home Verkennen Help
Registreren Inloggen
khysnik
/
template-lib
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Stable

Khysnik 4 uur geleden
bovenliggende
fb8136ebc7
commit
994de9ca06
5 gewijzigde bestanden met toevoegingen van 43 en 14 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 5 4
      app/lib/src/components/Body/Body.tsx
  2. 5 2
      app/lib/src/components/Footer/Footer.tsx
  3. 5 2
      app/lib/src/components/Header/Header.tsx
  4. 18 1
      app/lib/src/index.ts
  5. 10 5
      app/page.tsx

+ 5 - 4
app/lib/src/components/Body/Body.tsx
Bestand weergeven 

@@ -1,20 +1,21 @@
 
-import React, { ReactNode } from "react";
 
+import React, {ReactNode} from "react";
 
 
 interface BodyProps {
 
     children?: ReactNode;
 
     renderFn?: () => ReactNode;
 
+    height?: number;
 
     className?: string;
 
 }
 
 
 export const Body: React.FC<BodyProps> = ({
 
                                               children,
 
                                               renderFn,
 
+                                              height,
 
                                               className = "",
 
                                           }) => {
 
     return (
 
-        <main
 
-            className={`h-[80vh] overflow-auto px-6 py-4 bg-neutral-800 text-white ${className}`}
 
-        >
 
+        <main className={`overflow-auto px-6 py-4 ${className}`}
 
+              style={{height: height ? `${height}vh` : undefined}}>
 
             {renderFn ? renderFn() : children}
 
         </main>
 
     );

+ 5 - 2
app/lib/src/components/Footer/Footer.tsx
Bestand weergeven 

@@ -1,19 +1,22 @@
 
-import React, { ReactNode } from "react";
 
+import React, {ReactNode} from "react";
 
 
 interface FooterProps {
 
     children?: ReactNode;
 
     renderFn?: () => ReactNode;
 
+    height?: number;
 
     className?: string;
 
 }
 
 
 export const Footer: React.FC<FooterProps> = ({
 
                                                   children,
 
                                                   renderFn,
 
+                                                  height,
 
                                                   className = "",
 
                                               }) => {
 
     return (
 
         <footer
 
-            className={`h-[10vh] flex items-center justify-center px-6 bg-neutral-900 text-white ${className}`}
 
+            className={`px-6 ${className}`}
 
+            style={{height: height ? `${height}vh` : undefined}}
 
         >
 
             {renderFn ? renderFn() : children}
 
         </footer>

+ 5 - 2
app/lib/src/components/Header/Header.tsx
Bestand weergeven 

@@ -1,19 +1,22 @@
 
-import React, { ReactNode } from "react";
 
+import React, {ReactNode} from "react";
 
 
 interface HeaderProps {
 
     children?: ReactNode;
 
     renderFn?: () => ReactNode;
 
+    height?: number;
 
     className?: string;
 
 }
 
 
 export const Header: React.FC<HeaderProps> = ({
 
                                                   children,
 
                                                   renderFn,
 
+                                                  height,
 
                                                   className = "",
 
                                               }) => {
 
     return (
 
         <header
 
-            className={`h-[10vh] flex items-center px-6 bg-neutral-900 text-white ${className}`}
 
+            className={`px-6 ${className}`}
 
+            style={{height: height ? `${height}vh` : undefined}}
 
         >
 
             {renderFn ? renderFn() : children}
 
         </header>

+ 18 - 1
app/lib/src/index.ts
Bestand weergeven 

@@ -2,4 +2,21 @@ import './styles.css';
 
 
 export {Header} from './components/Header/Header';
 
 export {Body} from './components/Body/Body';
 
-export {Footer} from './components/Footer/Footer';
 
+export {Footer} from './components/Footer/Footer';
 
+
 
+export class Ratio {
 
+    body: number;
 
+    footer: number;
 
+    header: number;
 
+
 
+    constructor(header: number, footer: number, body: number) {
 
+        this.header = header;
 
+        this.body = body;
 
+        this.footer = footer;
 
+    }
 
+
 
+    top = () => this.header;
 
+    middle = () => this.body;
 
+    bottom = () => this.footer;
 
+
 
+}

+ 10 - 5
app/page.tsx
Bestand weergeven 

@@ -1,16 +1,21 @@
 
-import {Header, Body, Footer} from "./lib"
 
+import {Body, Footer, Header, Ratio} from "./lib"
 
 import "./page.css"
 
+
 
 export default function Home() {
 
-    const buildHeader = () => <h1>My Custom Header</h1>;
 
+    const ratio: Ratio = new Ratio(8, 6, 88);
 
 
     return (
 
         <div className="page-container">
 
-            <Header renderFn={buildHeader} />
 
-            <Body>
 
+            <Header height={ratio.top()} className="bg-gray-800 flex flex-row justify-center items-center">
 
+                <h1>My Website</h1>
 
+            </Header>
 
+            <Body height={ratio.middle()} className="bg-gray-700 justify-center items-center flex flex-col">
 
                 <h1>Main Content</h1>
 
                 <p>Your page content here...</p>
 
             </Body>
 
-            <Footer renderFn={() => <p>© 2025 Custom Footer</p>} />
 
+            <Footer height={ratio.bottom()} className="bg-gray-800 justify-center items-center flex">
 
+                <p>© 2025 Custom Footer</p>
 
+            </Footer>
 
         </div>
 
     );
 
 };