jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Empty White Page

Browse Source
This commit is contained in:
brausjonas
2023-05-02 15:17:14 +02:00
parent 2b8b5259b9
commit 04ca2319c2
4 changed files with 42 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projekt/src/components/Button.jsx → anwendung/src/components/Button.jsx
+39 -39
View File
@@ -1,39 +1,39 @@
import "../App.css" import "../../../projekt/src/App.css"
export default function Button(p) { export default function Button(p) {
let text = p.text; let text = p.text;
let width = p.width, height = p.height; let width = p.width, height = p.height;
let iconHTML = p.icon; let iconHTML = p.icon;
let iconWidth = p.iconWidth, iconHeight = p.iconHeight; let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
let onClick = p.onClick; let onClick = p.onClick;
if (height == null) height = 50; if (height == null) height = 50;
if (width == null) width = 100; if (width == null) width = 100;
if (iconWidth == null) iconWidth = 50; if (iconWidth == null) iconWidth = 50;
if (iconHeight == null) iconHeight = 50; if (iconHeight == null) iconHeight = 50;
if (onClick == null) onClick = () => {}; if (onClick == null) onClick = () => {};
if (iconHTML != null) { if (iconHTML != null) {
let split = iconHTML.split("fill="); let split = iconHTML.split("fill=");
split[1] = "fill=" + split[1]; split[1] = "fill=" + split[1];
split[0] += " width=" + iconWidth + " height=" + iconHeight + " "; split[0] += " width=" + iconWidth + " height=" + iconHeight + " ";
iconHTML = split[0] + split[1] iconHTML = split[0] + split[1]
} else { } else {
iconHTML = ""; iconHTML = "";
} }
return ( return (
<> <>
<button className={"round-border button font font-middle"} <button className={"round-border button font font-middle"}
style={{ style={{
width: width, width: width,
height: height, height: height,
}} }}
onClick={onClick}> onClick={onClick}>
{text} {text}
<div dangerouslySetInnerHTML={{__html: iconHTML}}/> <div dangerouslySetInnerHTML={{__html: iconHTML}}/>
</button> </button>
</> </>
); );
} }
anwendung/src/pages/_app.js
+1 -1
View File
@@ -1,4 +1,4 @@
import '@/styles/globals.css' //import '@/styles/globals.css'
export default function App({ Component, pageProps }) { export default function App({ Component, pageProps }) {
return <Component {...pageProps} /> return <Component {...pageProps} />
anwendung/src/pages/_document.js
-13
View File
@@ -1,13 +0,0 @@
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
anwendung/src/pages/index.js
+2 -110
View File
@@ -1,118 +1,10 @@
import Image from 'next/image'
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
import Button from "@/components/Button";
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ['latin'] })
export default function Home() { export default function Home() {
return ( return (
<main <></>
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">src/pages/index.js</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Discover and deploy boilerplate example Next.js&nbsp;projects.
</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
) )
} }