From a1cdabf0a962766d622a4bc74d0c18e0bc7cac5f Mon Sep 17 00:00:00 2001
From: Emil Krebs <emil.krebs@outlook.de>
Date: Tue, 3 Sep 2024 19:07:36 +0200
Subject: [PATCH] minor improvements

---
 package.json                        |  4 ++--
 src/app/components/notification.tsx |  4 ++--
 src/app/page.tsx                    | 20 +++++++++-----------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 727f70d..007ba54 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,13 @@
 	},
 	"devDependencies": {
 		"eslint-config-next": "^14.2.7",
-		"@types/node": "^22.5.1",
+		"@types/node": "^22.5.2",
 		"@types/react": "^18.3.5",
 		"@types/react-dom": "^18",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^8",
 		"eslint-config-prettier": "^9.1.0",
-		"postcss": "^8.4.42",
+		"postcss": "^8.4.44",
 		"tailwindcss": "^3.4.10",
 		"typescript": "^5.5.3"
 	}
diff --git a/src/app/components/notification.tsx b/src/app/components/notification.tsx
index fbca68b..898d389 100644
--- a/src/app/components/notification.tsx
+++ b/src/app/components/notification.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 
 
 interface NotificationProps {
-	content: React.ReactNode;
+	children: React.ReactNode;
 }
 
 export default function PageNotification(props: NotificationProps) {
@@ -14,7 +14,7 @@ export default function PageNotification(props: NotificationProps) {
 	return (
 		visible &&
 		<div className={"fixed bottom-4 right-2 left-2 sm:right-4 sm:left-auto bg-purple-900 border border-gray-300 rounded-lg shadow-2xl z-50"}>
-			{props.content}
+			{props.children}
 
 			<button
 				className="absolute top-0 right-0 p-2"
diff --git a/src/app/page.tsx b/src/app/page.tsx
index de84ee0..6960341 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,18 +7,18 @@ import PageNotification from "./components/notification";
 import Link from "next/link";
 
 
-const notificationContent = <>
-	<div className="flex flex-col items-start justify-center gap-2 w-fit sm:w-96 px-4 py-6 sm:p-6">
-		<h2 className="text-lg font-bold ">📢 Are you going to the gym?</h2>
-		<p className="text-sm text-start text-wrap">Get the chance to win a <strong className="shine-effect">10€ Amazon gift card</strong> by participating in this <strong>2-minute</strong> survey!</p>
-
-		<LinkButton href="https://forms.gle/VoqPnzx83hUq6faj6" target="_blank">Take the survey</LinkButton>
-	</div>
-</>;
-
 export default async function Page() {
 	return (
 		<main className="flex min-h-screen w-full flex-col items-center justify-center p-4">
+			<PageNotification>
+				<div className="flex flex-col items-start justify-center gap-2 w-fit sm:w-96 px-4 py-6 sm:p-6">
+					<h2 className="text-lg font-bold ">📢 Are you going to the gym?</h2>
+					<p className="text-sm text-start text-wrap">Get the chance to win a <strong className="shine-effect">10€ Amazon gift card</strong> by participating in this <strong>2-minute</strong> survey!</p>
+
+					<LinkButton href="https://forms.gle/VoqPnzx83hUq6faj6" target="_blank">Take the survey</LinkButton>
+				</div>
+			</PageNotification>
+
 			<div className="flex flex-col items-center justify-center w-full gap-4 mt-8 overflow-x-hidden">
 				{/* Header */}
 				<Header />
@@ -35,8 +35,6 @@ export default async function Page() {
 				<BusinessCards />
 
 			</div>
-
-			<PageNotification content={notificationContent} />
 		</main>
 	);
 }