feat: add tree animation

neoskop · Feb 13, 2023 · 93e05bd · 93e05bd · vercel · Feb 13, 2023
1 parent fd5c98d
commit 93e05bd
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 29 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,17 @@
 body {
   height: 100vh;
 }
+
+.main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.animation {
+  width: min(72%, 480px);
+  aspect-ratio: 1 / 1;
+}
diff --git a/app/layout.js b/app/layout.js
@@ -1,14 +1,16 @@
-import './globals.css'
+import Nav from "@/components/Nav";
+import "./globals.css";
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      {/*
-        <head /> will contain the components returned by the nearest parent
-        head.js. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
-      */}
       <head />
-      <body>{children}</body>
+      <body>
+        <main className="main">
+          <div className="animation">{children}</div>
+          <Nav />
+        </main>
+      </body>
     </html>
-  )
+  );
 }
diff --git a/app/page.js b/app/page.js
@@ -1,13 +1,5 @@
 "use client";
-import Rive from "@rive-app/react-canvas";
-import styles from "./page.module.css";
 
 export default function RivLab() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.animation}>
-        <Rive src="animations/party.riv" />
-      </div>
-    </main>
-  );
+  return <>Hallo</>;
 }
diff --git a/app/page.module.css b/app/page.module.css
diff --git a/app/party/page.js b/app/party/page.js
@@ -0,0 +1,7 @@
+"use client";
+
+import Rive from "@rive-app/react-canvas";
+
+export default function Tree() {
+  return <Rive src="animations/party.riv" />;
+}
diff --git a/app/tree/page.js b/app/tree/page.js
@@ -0,0 +1,7 @@
+"use client";
+
+import Rive from "@rive-app/react-canvas";
+
+export default function Tree() {
+  return <Rive src="animations/tree.riv" stateMachines="flow" />;
+}
diff --git a/components/Nav/index.js b/components/Nav/index.js
@@ -0,0 +1,22 @@
+"use client";
+import Link from "next/link";
+import styles from "./styles.module.css";
+
+export default function Nav() {
+  return (
+    <nav className={styles.navigation}>
+      <ul className={styles.list}>
+        <li className={styles.item}>
+          <Link href="/party" className={styles.link} activeStyle={{ color: "#000" }}>
+            Party
+          </Link>
+        </li>
+        <li className={styles.item}>
+          <Link href="/tree" className={styles.link} activeStyle={{ color: "#000" }}>
+            Tree
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
diff --git a/components/Nav/styles.module.css b/components/Nav/styles.module.css
@@ -0,0 +1,24 @@
+.navigation {
+  position: absolute;
+  bottom: 10vh;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.list {
+  list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  font-family: sans-serif;
+  font-size: 1.2rem;
+  padding: 0 2rem;
+}
+
+.link {
+  text-decoration: none;
+  color: #cccccc;
+}
diff --git a/public/animations/tree.riv b/public/animations/tree.riv