atridad/pollo
1
0
Fork 0
Code Activity Actions

UX updates... the main page is now fully static :)

Browse source
This commit is contained in:
Atridad Lahiji 2023-05-31 21:49:25 -06:00
parent 8595620199
commit fb85aa2187
No known key found for this signature in database
5 changed files with 159 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Footer.tsx
View file

@ -3,7 +3,7 @@ import packagejson from "../../package.json";
const Footer: React.FC = () => { const Footer: React.FC = () => {
return ( return (
<footer className="footer footer-center h-[48px] p-2 bg-base-100 text-base-content"> <footer className="footer footer-center h-12 p-2 bg-base-100 text-base-content">
<div> <div>
<p> <p>
Made with{" "} Made with{" "}

2
src/components/Loading.tsx
View file

@ -1,7 +1,7 @@
const Loading: React.FC = () => { const Loading: React.FC = () => {
return ( return (
<div <div
className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] m-4" className="inline-block h-12 w-12 rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"
role="status" role="status"
> >
<span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"> <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">

36
src/components/Navbar.tsx
View file

@ -1,17 +1,36 @@
import { useSession, signOut } from "next-auth/react"; import { useSession, signOut, signIn } from "next-auth/react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { env } from "~/env.mjs"; import { env } from "~/env.mjs";
import Loading from "./Loading";
import { useRouter } from "next/router";
interface NavbarProps { interface NavbarProps {
title: string; title: string;
} }
const Navbar: React.FC<NavbarProps> = ({ title }) => { const Navbar: React.FC<NavbarProps> = ({ title }) => {
const { data: sessionData } = useSession(); const { data: sessionData, status: sessionStatus } = useSession();
const router = useRouter();
const navigationMenu = () => {
if (sessionStatus === "authenticated" && router.pathname !== "/dashboard") {
return (
<Link className="btn btn-secondary btn-outline mx-2" href="/dashboard">
Dashboard
</Link>
);
} else if (sessionStatus === "unauthenticated") {
return (
<button className="btn btn-secondary" onClick={() => void signIn()}>
Sign In
</button>
);
}
};
return ( return (
<nav className="navbar bg-base-100"> <nav className="navbar bg-base-100 h-12">
<div className="flex-1"> <div className="flex-1">
<Link <Link
about="Back to home." about="Back to home."
@ -19,17 +38,22 @@ const Navbar: React.FC<NavbarProps> = ({ title }) => {
className="btn btn-ghost normal-case text-xl" className="btn btn-ghost normal-case text-xl"
> >
<Image <Image
className="mr-2" className="md:mr-2"
src="/logo.webp" src="/logo.webp"
alt="Nav Logo" alt="Nav Logo"
width={32} width={32}
height={32} height={32}
priority priority
/> />
{title} <span className="hidden md:inline-flex">
{env.NEXT_PUBLIC_APP_ENV === "development" && " >> DEV"} {title}
{env.NEXT_PUBLIC_APP_ENV === "development" && " >> DEV"}
</span>
</Link> </Link>
</div> </div>
{navigationMenu()}
{sessionData?.user.image && ( {sessionData?.user.image && (
<div className="flex-none gap-2"> <div className="flex-none gap-2">
<div className="dropdown dropdown-end"> <div className="dropdown dropdown-end">

102
src/pages/dashboard/index.tsx Normal file
View file

@ -0,0 +1,102 @@
import { GetServerSideProps, type NextPage } from "next";
import Head from "next/head";
import { signIn, useSession } from "next-auth/react";
import RoomList from "~/components/RoomList";
import { useState } from "react";
import Link from "next/link";
import { FaShieldAlt } from "react-icons/fa";
import { getServerAuthSession } from "~/server/auth";
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const session = await getServerAuthSession(ctx);
// Redirect to login if not signed in
if (!session) {
return {
redirect: {
destination: `/api/auth/signin?callbackUrl=${ctx.resolvedUrl}`,
permanent: false,
},
};
}
// Return session if logged in
return {
props: { session },
};
};
const Home: NextPage = () => {
return (
<>
<Head>
<title>Sprint Padawan</title>
<meta name="description" content="Plan. Sprint. Repeat." />
</Head>
<div className="prose flex flex-col text-center items-center justify-center px-4 py-16">
<HomePageBody />
</div>
</>
);
};
export default Home;
const HomePageBody: React.FC = () => {
const { data: sessionData } = useSession();
const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>("");
const [tabIndex, setTabIndex] = useState<number>(0);
return (
<>
<h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto">
Hi, {sessionData?.user.name}!{" "}
{sessionData?.user.role === "ADMIN" && (
<FaShieldAlt className="inline-block text-primary" />
)}
</h1>
<div className="tabs tabs-boxed border-2 border-cyan-500 mb-4">
<a
className={
tabIndex === 0 ? "tab no-underline tab-active" : "tab no-underline"
}
onClick={() => setTabIndex(0)}
>
Join a Room
</a>
<a
className={
tabIndex === 1 ? "tab no-underline tab-active" : "tab no-underline"
}
onClick={() => setTabIndex(1)}
>
Room List
</a>
</div>
{tabIndex === 0 && (
<>
<input
type="text"
placeholder="Enter Room ID"
className="input input-bordered input-primary mb-4"
onChange={(event) => {
console.log(event.target.value);
setJoinRoomTextBox(event.target.value);
}}
/>
<Link
href={joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"}
className="btn btn-secondary"
>
Join Room
</Link>
</>
)}
{tabIndex === 1 && <RoomList />}
</>
);
};

129
src/pages/index.tsx
View file

@ -1,13 +1,5 @@
import { type NextPage } from "next"; import { type NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { signIn, useSession } from "next-auth/react";
import RoomList from "~/components/RoomList";
import { useState } from "react";
import Link from "next/link";
import Loading from "~/components/Loading";
import { FaShieldAlt } from "react-icons/fa";
const Home: NextPage = () => { const Home: NextPage = () => {
return ( return (
@ -26,101 +18,30 @@ const Home: NextPage = () => {
export default Home; export default Home;
const HomePageBody: React.FC = () => { const HomePageBody: React.FC = () => {
const { data: sessionData, status: sessionStatus } = useSession(); return (
const [joinRoomTextBox, setJoinRoomTextBox] = useState<string>(""); <>
const [tabIndex, setTabIndex] = useState<number>(0); <h1 className="text-6xl">
Sprint{" "}
<span className="bg-gradient-to-br from-pink-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
Padawan
</span>
</h1>
if (sessionStatus === "authenticated") { <h2 className="my-4 text-3xl">
return ( A{" "}
<> <span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
<h1 className="flex flex-row flex-wrap text-center justify-center items-center gap-1 text-md mx-auto"> scrum poker{" "}
Hi, {sessionData.user.name}!{" "} </span>{" "}
{sessionData.user.role === "ADMIN" && ( tool that helps{" "}
<FaShieldAlt className="inline-block text-primary" /> <span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
)} agile teams{" "}
</h1> </span>{" "}
<div className="tabs tabs-boxed border-2 border-cyan-500 mb-4"> plan their sprints in{" "}
<a <span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
className={ real-time
tabIndex === 0 </span>
? "tab no-underline tab-active" .
: "tab no-underline" </h2>
} </>
onClick={() => setTabIndex(0)} );
>
Join a Room
</a>
<a
className={
tabIndex === 1
? "tab no-underline tab-active"
: "tab no-underline"
}
onClick={() => setTabIndex(1)}
>
Room List
</a>
</div>
{tabIndex === 0 && (
<>
<input
type="text"
placeholder="Enter Room ID"
className="input input-bordered input-primary mb-4"
onChange={(event) => {
console.log(event.target.value);
setJoinRoomTextBox(event.target.value);
}}
/>
<Link
href={
joinRoomTextBox.length > 0 ? `/room/${joinRoomTextBox}` : "/"
}
className="btn btn-secondary"
>
Join Room
</Link>
</>
)}
{tabIndex === 1 && <RoomList />}
</>
);
} else {
return (
<>
<h1 className="text-6xl">
Sprint{" "}
<span className="bg-gradient-to-br from-pink-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
Padawan
</span>
</h1>
<h2 className="my-4 text-3xl">
A{" "}
<span className="bg-gradient-to-br from-pink-600 to-pink-400 bg-clip-text text-transparent box-decoration-clone">
scrum poker{" "}
</span>{" "}
tool that helps{" "}
<span className="bg-gradient-to-br from-purple-600 to-purple-400 bg-clip-text text-transparent box-decoration-clone">
agile teams{" "}
</span>{" "}
plan their sprints in{" "}
<span className="bg-gradient-to-br from-cyan-600 to-cyan-400 bg-clip-text text-transparent box-decoration-clone">
real-time
</span>
.
</h2>
{sessionStatus === "loading" ? (
<Loading />
) : (
<button className="btn btn-secondary" onClick={() => void signIn()}>
Sign In
</button>
)}
</>
);
}
}; };