Skip to content

Commit 14c0f07

Browse files
GizmotronnGizmotronn
committed
🪥🪩 ↝ [SGV2-22 SGV2-10]: Updating layout & header
1 parent 4f157f2 commit 14c0f07

File tree

15 files changed

+123
-40
lines changed

15 files changed

+123
-40
lines changed

‎components/Authentication/LoginModal.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { ReactNode, useEffect } from 'react';
22
// import { useHistory } from 'react-router-dom';
33
import Link from 'next/link';
4-
import Layout from '../_Core/Section/Layout';
54
import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
65
import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
76
import { useRouter } from 'next/router';

‎components/Content/Archive/ArchivedInventory.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
3-
import Layout from "../../_Core/Section/Layout";
3+
import { SpareLayout } from "../../_Core/Section/Layout";
44
import OwnedPlanetsList from "./UserOwnedPlanets"; // Potentially this should be in a lists component dir
55
import OwnedItemsList from "../Inventory/UserOwnedItems";
66
import MySpaceships from "../../Gameplay/Vehicles/MySpaceships";
@@ -10,11 +10,11 @@ export default function V1Inventory() { // Inventory items for v1 of public sche
1010
const session = useSession();
1111

1212
return (
13-
<Layout>
13+
<SpareLayout>
1414
<OwnedPlanetsList />
1515
<OwnedItemsList />
1616
<MySpaceships />
17-
</Layout>
17+
</SpareLayout>
1818
);
1919
};
2020

‎components/_Core/Section/Header.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
3+
export default function Header() {
4+
return (
5+
<div className="navbar bg-base-100 h-full w-full bg-red-100 rounded-md bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-10">
6+
<div className="navbar-start">
7+
<div className="dropdown">
8+
<div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
9+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
10+
</div>
11+
<ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
12+
<li><a>Homepage</a></li>
13+
<li><a>Portfolio</a></li>
14+
<li><a>About</a></li>
15+
</ul>
16+
</div>
17+
</div>
18+
<div className="navbar-center">
19+
<a className="btn btn-ghost text-xl">[Planet Name]</a>
20+
</div>
21+
<div className="navbar-end">
22+
<button className="btn btn-ghost btn-circle">
23+
<div className="indicator">
24+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
25+
<span className="badge badge-xs badge-primary indicator-item"></span>
26+
</div>
27+
</button>
28+
</div>
29+
</div>
30+
);
31+
};

‎components/_Core/Section/Layout.tsx

+54-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Bottombar from "./BottomBar";
44
import { useMediaQuery } from "react-responsive";
55
import FeedOverlay from "../../Overlays/1-Feed";
66
import { Garden } from "../../Content/Planets/GalleryList";
7+
import Header from "./Header";
78

89
interface DashboardLayoutProps {
910
children: ReactNode;
@@ -13,6 +14,59 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
1314
const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
1415
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
1516

17+
return (
18+
<div className="flex relative items-start h-screen y-full">
19+
{isTabletOrMobile && (
20+
<style jsx global>
21+
{`
22+
body {
23+
background: url('https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE1MTI2Mzk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=OuEtnaPodT1W4BsZZep27dJD5Sk3jzwsrSj1Dktkh2GoojVG~Ttn0WFhDvEBx~m6bX0~~8tEIcqk-NuornLcTtfG0TIE0H18LOPj-BWhTS9dg72-Zkg3ris1MwpAkSuQ~9GUlKPt3N4VgYz5b6h7TmDa06u7PPATCEuIwcjXBs23sNZbW4bAOS9EQTzv9bjPY6rc1IPFq~9ua8xx8~3q8qMlcZ1NoB1pYhCJEM7ROBPBu0fWtp2IlUYNAX21zBJFTgvnqjsIazuual3wLR1ennoO3mRuMS8uzTq6eoHBiIwKkY4rQUFsUpuORWcOpevh7Wz6eGBn7d4X5xDhuBV6oA__&format=jpeg') center/cover;
24+
}
25+
26+
@media only screen and (max-width: 767px) {
27+
.planet-heading {
28+
color: white;
29+
font-size: 24px;
30+
text-align: center;
31+
margin-bottom: 10px;
32+
}
33+
}
34+
`}
35+
</style>
36+
)}
37+
{isDesktopOrLaptop && (
38+
<style jsx global>
39+
{`
40+
body {
41+
background: url('https://cdn.cloud.scenario.com/assets/asset_qKG9F9VyYL2Lrm4NypYEH8Pd?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9xS0c5RjlWeVlMMkxybTROeXBZRUg4UGQ~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE0NTIxNTk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=aS2TO5Cc8KU13TNhVDqsu4si2lUH8IUAQAtuplL1X5Fr78mWwr22xnYy0nzoSsSdwW2TYbqFuoRoqpdX8CVV-kHmmlM27Tm7xjkBjvB-Otjbjlnhbvu~Ut72YtI-Y2edrNE3XKTNf5XhcJ9-y5SlF02zC0DeFAVgDbPsQLGSJIcQ1QrN0ayX~HyA2I5K39RYlc-N3WGgRPxLMBgzrWAZurK6SqN5xCmu1~nWL1t5IadvkDyDBG~ctN-jSX-bsDmx80cCKVLi7C-IfFzCtTe4nZ0qdKbKd~AgQekbhSsl40FZhbaQYJmiS5pQ2wlDGkd0yBhOKuVgkFT8UY3y1pE1XQ__&format=jpeg') center/cover;
42+
background-attachment: fixed;
43+
}
44+
45+
@media only screen and (max-width: 767px) {
46+
.planet-heading {
47+
color: white;
48+
font-size: 24px;
49+
text-align: center;
50+
margin-bottom: 10px;
51+
}
52+
}
53+
`}
54+
</style>
55+
)}
56+
<main className="h-max pb-10 grow overflow-y-auto">
57+
<Header />
58+
{children}
59+
</main>
60+
</div>
61+
);
62+
};
63+
64+
export default Layout;
65+
66+
export const SpareLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
67+
const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
68+
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
69+
1670
return (
1771
<div className="flex relative items-start h-screen y-full">
1872
{isTabletOrMobile && (
@@ -61,8 +115,6 @@ const Layout: React.FC<DashboardLayoutProps> = ({ children }) => {
61115
);
62116
};
63117

64-
export default Layout;
65-
66118
export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
67119
const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
68120
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });

‎pages/explore/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import React, { useState } from "react";
33
import { RoverMobileTest } from "../../components/Modals/rover-mobile-test";
44
import { RoverInterface, RoverInterfaceDark, RoverInterfaceDarkMobile } from "../../components/Modals/rover-interface";
5-
import Layout from "../../components/_Core/Section/Layout";
65
import Navigation from "../../components/_Core/Section/Navbar";
76
import FeedOverlay from "../../components/Overlays/1-Feed";
87
import { useMediaQuery } from "react-responsive";

‎pages/feed/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
22
import React, { useEffect, useState } from "react";
3-
import Layout from "../../components/_Core/Section/Layout";
3+
import { SpareLayout } from "../../components/_Core/Section/Layout";
44
// import ClassificationFeed from "../../components/Content/ClassificationFeed";
55
import Login from "../login";
66

@@ -32,18 +32,18 @@ export default function Home() {
3232
const customMaxWidth = isMobile ? "100%" : "70%";
3333

3434
return (
35-
<Layout>
35+
<SpareLayout>
3636
{/* <div className="py-10">
3737
<HomePlanetStats />
3838
</div> */}
3939
<div className="py-10">
4040
{/* <ClassificationFeed custommaxWidth={customMaxWidth} /> */}
4141
</div>
42-
</Layout>
42+
</SpareLayout>
4343
);
4444
}
4545

4646
return (
47-
<Layout><Login /></Layout>
47+
<SpareLayout><Login /></SpareLayout>
4848
);
4949
}

‎pages/garden.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { Garden } from "../components/Content/Planets/GalleryList";
3-
import Layout, { LayoutNoNav } from "../components/_Core/Section/Layout";
3+
import { LayoutNoNav } from "../components/_Core/Section/Layout";
44
import Navbar from "../components/_Core/Section/Navbar";
55

66
export default function GardenPage() {

‎pages/gather/index.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
22
import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
33
import React from "react";
4-
import Link from "next/link";
5-
import Layout from "../../components/_Core/Section/Layout";
4+
import { SpareLayout } from "../../components/_Core/Section/Layout";
65
import CreateBasePlanetSector, { AllSectors, UserOwnedSectorGrid } from "../../components/Content/Planets/Sectors/SectorSetup";
76

87
export default function GatherResourcesPage() {
@@ -16,7 +15,7 @@ export default function GatherResourcesPage() {
1615
};
1716

1817
return (
19-
<Layout>
18+
<SpareLayout>
2019
<div className="p-5">
2120
<h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-2 mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">Your planet</h1>
2221
{/* <pre>You've currently got one planet in your inventory (as we're only exploring base planets for now). Here's the latest rover image set.</pre> */}
@@ -26,6 +25,6 @@ export default function GatherResourcesPage() {
2625
<h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-2 mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">All sectors</h1>
2726
<AllSectors />
2827
</div>
29-
</Layout>
28+
</SpareLayout>
3029
);
3130
};

‎pages/index.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useMediaQuery } from 'react-responsive';
55

66
import { Metadata } from "next";
77
import PublicLanding from "../components/_Core/LandingContent";
8+
import Layout from "../components/_Core/Section/Layout";
89

910
export const metadata: Metadata = {
1011
title: "Star Sailors",
@@ -15,11 +16,13 @@ export default function Home() {
1516
const supabase = useSupabaseClient();
1617
const router = useRouter();
1718

18-
// if (session) {
19-
// return (
20-
// <></>
21-
// );
22-
// };
19+
if (session) {
20+
return (
21+
<Layout>
22+
<p>Run into the shadows</p>
23+
</Layout>
24+
);
25+
};
2326

2427
return (
2528
<PublicLanding />

‎pages/login/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
22
import React, { useEffect } from 'react';
33
import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
44
import { useRouter } from 'next/router'; // Import the useRouter hook
5-
import Layout from '../../components/_Core/Section/Layout';
5+
import { SpareLayout } from '../../components/_Core/Section/Layout';
66
import LoginPage from '../../components/Authentication/LoginModal';
77

88
const Login = () => {
@@ -20,9 +20,9 @@ const Login = () => {
2020
return (
2121
<div className='container' style={{ padding: '50px 0 100px 0' }}>
2222
{!session ? (
23-
<Layout><LoginPage /></Layout>
23+
<SpareLayout><LoginPage /></SpareLayout>
2424
) : (
25-
<Layout>Logged in</Layout>
25+
<SpareLayout>Logged in</SpareLayout>
2626
)}
2727
</div>
2828
);

‎pages/login/register.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Auth, ThemeSupa } from '@supabase/auth-ui-react';
22
import React, { useEffect } from 'react';
33
import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react';
44
import { useRouter } from 'next/router'; // Import the useRouter hook
5-
import Layout from '../../components/_Core/Section/Layout';
5+
import { SpareLayout } from '../../components/_Core/Section/Layout';
66
import LoginPage from '../../components/Authentication/LoginModal';
77

88
const Register = () => {
@@ -20,9 +20,9 @@ const Register = () => {
2020
return (
2121
<div className='container' style={{ padding: '50px 0 100px 0' }}>
2222
{!session ? (
23-
<Layout><div className='w-80%'><Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' /></div></Layout>
23+
<SpareLayout><div className='w-80%'><Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} theme='dark' /></div></SpareLayout>
2424
) : (
25-
<Layout>Logged in</Layout>
25+
<SpareLayout>Logged in</SpareLayout>
2626
)}
2727
</div>
2828
);

‎pages/onboarding/select.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
22
import React, { useState } from "react";
3-
import Layout from "../../components/_Core/Section/Layout";
3+
import { SpareLayout } from "../../components/_Core/Section/Layout";
44
import SelectYourBasePlanet from "../../components/Gameplay/SelectYourPlanet";
55

66
export default function Home() {
@@ -17,13 +17,13 @@ export default function Home() {
1717

1818
if (session) {
1919
return (
20-
<Layout>
20+
<SpareLayout>
2121
<SelectYourBasePlanet />
22-
</Layout>
22+
</SpareLayout>
2323
);
2424
};
2525

2626
return (
27-
<Layout>Hello</Layout>
27+
<SpareLayout>Hello</SpareLayout>
2828
);
2929
};

‎pages/planets/sector/[id].tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from "react";
22
import { useRouter } from "next/router";
3-
import Layout from "../../../components/_Core/Section/Layout";
3+
import { SpareLayout } from "../../../components/_Core/Section/Layout";
44
import BasePlanetSector from "../../../components/Content/[id]/BasePlanetSector";
55

66
export default function SectorPage () {
@@ -27,10 +27,10 @@ export default function SectorPage () {
2727
};
2828

2929
return (
30-
<Layout>
30+
<SpareLayout>
3131
<div className="h-screen py-10">
3232
<BasePlanetSector sectorid={id as string} />
3333
</div>
34-
</Layout>
34+
</SpareLayout>
3535
);
3636
};

‎pages/planets/sectors/[id].tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import { useRouter } from "next/router";
3-
import Layout from "../../../components/_Core/Section/Layout";
3+
import { SpareLayout } from "../../../components/_Core/Section/Layout";
44
import BasePlanetSectors from "../../../components/Content/[id]/BasePlanetAllSectors";
55

66
export default function PlanetSectors() {
@@ -27,10 +27,10 @@ export default function PlanetSectors() {
2727
};
2828

2929
return (
30-
<Layout>
30+
<SpareLayout>
3131
<div className="h-screen py-10">
3232
<BasePlanetSectors planetId={id as string} />
3333
</div>
34-
</Layout>
34+
</SpareLayout>
3535
);
3636
};

‎pages/tests/bento.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from "react";
2-
import Layout, { LayoutNoNav } from "../../components/_Core/Section/Layout";
2+
import { SpareLayout } from "../../components/_Core/Section/Layout";
33
import BlockGrid from "../../components/_Core/Section/BentoBox";
44

55
export default function AllBlocksTestPage() {
66
return (
7-
<Layout>
7+
<SpareLayout>
88
<BlockGrid />
9-
</Layout>
9+
</SpareLayout>
1010
);
1111
};

0 commit comments

Comments
 (0)