having one solution for different components of app
This commit is contained in:
Arjun Patel
@@ -0,0 +1,20 @@
|
||||
import "../styles/globals.css";
|
||||
import "antd/dist/antd.css";
|
||||
import Head from "next/head";
|
||||
import { AuthProvider } from "../contexts/authContext";
|
||||
import SiteLayout from "../components/Layouts/SiteLayout";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return (
|
||||
<SiteLayout>
|
||||
<AuthProvider>
|
||||
<Component {...pageProps} />
|
||||
</AuthProvider>
|
||||
|
||||
<Toaster position="top-center" />
|
||||
</SiteLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { NextApiRequest, NextApiResponse } from "next";
|
||||
// import { adminApp } from "../../../services/firebaseAdminService";
|
||||
import { getAuth } from "firebase/auth";
|
||||
import firebaseAdminAll, { credential } from "firebase-admin";
|
||||
|
||||
// todo do this here instead of cloud functions or just leave as is
|
||||
export default async function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse
|
||||
) {
|
||||
console.log(req.cookies);
|
||||
console.log(req.body);
|
||||
|
||||
if (!req.cookies.auth) {
|
||||
res.status(401).send({ reason: "not authorized" });
|
||||
return;
|
||||
}
|
||||
|
||||
// if (!verifiedToken) {
|
||||
// res.status(401).send({ reason: "auth token not valid" });
|
||||
// return;
|
||||
// }
|
||||
|
||||
res.status(200).json({ name: "John Doe" });
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import fbAdm, { credential } from "firebase-admin";
|
||||
import firebaseAdmin, { App } from "firebase-admin/app";
|
||||
|
||||
import { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
// import serviceAccount from "../../../nirvana-for-business-firebase-adminsdk";
|
||||
|
||||
// const adminApp = firebaseAdmin.initializeApp({
|
||||
// credential: credential.cert({
|
||||
// privateKey: serviceAccount.private_key,
|
||||
// clientEmail: serviceAccount.client_email,
|
||||
// projectId: serviceAccount.project_id,
|
||||
// }),
|
||||
// });
|
||||
|
||||
// export default async function(req: NextApiRequest, res: NextApiResponse) {
|
||||
// console.log('Validating token...');
|
||||
|
||||
// try {
|
||||
// const { token } = JSON.parse(req.headers.authorization || '{}');
|
||||
// if (!token) {
|
||||
// return res.status(403).send({
|
||||
// errorCode: 403,
|
||||
// message: 'Auth token missing.'
|
||||
// });
|
||||
// }
|
||||
|
||||
// const verifiedToken = fbAdm.auth().verifyIdToken(token)
|
||||
|
||||
// return res.status(200).send(verifiedToken);
|
||||
// } catch (err) {
|
||||
// return res.status(err.code).send({
|
||||
// errorCode: err.code,
|
||||
// message: err.message,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,5 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import LangingPageLayout from "../components/Layouts/LandingPageLayout";
|
||||
import {
|
||||
FcAssistant,
|
||||
FcCollaboration,
|
||||
FcFilingCabinet,
|
||||
FcGoogle,
|
||||
FcLandscape,
|
||||
FcOrgUnit,
|
||||
FcVideoCall,
|
||||
} from "react-icons/fc";
|
||||
import LandingPageActionBar from "../components/demo/LandingPageActionBar";
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<LangingPageLayout>
|
||||
<span className="flex flex-col my-20 items-center text-center">
|
||||
<span>FEATURES</span>
|
||||
<span className="text-5xl font-bold">
|
||||
Your WFH <span className="text-teal-600">Hub</span>
|
||||
</span>
|
||||
<span className="text-gray-500 text-lg">
|
||||
Come to work with clarity of mind.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row mb-2 flex-wrap gap-2 justify-center">
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcAssistant className="text-5xl -ml-2" />
|
||||
<span className="text-teal-600">async</span>
|
||||
<span className="text-lg font-semibold">Voice Conversations.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Listen to your teammate talk to you realtime if you are online.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcCollaboration className="text-5xl" />
|
||||
<span className="text-teal-600">informal</span>
|
||||
<span className="text-lg font-semibold">Office Rooms.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Nirvana voice-only rooms to collaborate and work with your closest
|
||||
teammates throughout the day.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcVideoCall className="text-5xl" />
|
||||
<span className="text-teal-600">formal</span>
|
||||
<span className="text-lg font-semibold">Meeting Rooms.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Spontaneous, scheduled, or recurring <FcGoogle className="inline" />{" "}
|
||||
Meet meetings. All conversations transparent for the team to see.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcFilingCabinet className="text-5xl -ml-2" />
|
||||
<span className="text-teal-600">desk</span>
|
||||
<span className="text-lg font-semibold">Drawer.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Personal and team drawer of links: Jira, Drive, Dropbox, Github,
|
||||
screenshots, code snippets.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcOrgUnit className="text-5xl -ml-2" />
|
||||
<span className="text-teal-600">team</span>
|
||||
<span className="text-lg font-semibold">Announcements.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Keep your team focused. Mention blockers, priorities, updates...
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md">
|
||||
<FcLandscape className="text-5xl" />
|
||||
<span className="text-teal-600">ephemeral</span>
|
||||
<span className="text-lg font-semibold">Inbox Zero.</span>
|
||||
|
||||
<span className="text-md text-gray-500">
|
||||
Links, conversations, rooms...They all disappear from your main view
|
||||
to keep you and your team focused.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<LandingPageActionBar />
|
||||
</LangingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,399 @@
|
||||
import Head from "next/head";
|
||||
import {
|
||||
FaSlackHash,
|
||||
FaNewspaper,
|
||||
FaCalendarAlt,
|
||||
FaRocketchat,
|
||||
FaAngleRight,
|
||||
FaCheck,
|
||||
FaInfo,
|
||||
FaInfoCircle,
|
||||
FaClock,
|
||||
FaLink,
|
||||
FaPlay,
|
||||
} from "react-icons/fa";
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
import TeamVoiceLine from "../components/demo/TeamVoiceLine";
|
||||
import Announcements from "../components/demo/Announcements";
|
||||
import Rooms from "../components/demo/Rooms";
|
||||
import VoiceLineConceptDemo from "../components/demo/VoiceLineConceptDemo";
|
||||
|
||||
import MainLogo from "../components/MainLogo";
|
||||
import { Divider, Tooltip, Image as AntDImage } from "antd";
|
||||
import LangingPageLayout from "../components/Layouts/LandingPageLayout";
|
||||
import LandingPageActionBar from "../components/demo/LandingPageActionBar";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
const handleGetDemo = () => {
|
||||
window.open("https://calendly.com/usenirvana/30min", "_blank");
|
||||
};
|
||||
|
||||
const getStartedButton = (
|
||||
<button
|
||||
onClick={handleGetDemo}
|
||||
className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center space-x-2"
|
||||
>
|
||||
<span>Get Demo</span>
|
||||
<FaAngleRight />
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<LangingPageLayout>
|
||||
{/* header text */}
|
||||
<div className="flex flex-col items-center backdrop-blur-lg p-10">
|
||||
<span className="flex flex-col items-center text-center text-3xl md:text-5xl font-bold ">
|
||||
<span>
|
||||
<span className="text-teal-800">Minimal </span>
|
||||
Communication Tool for
|
||||
</span>
|
||||
|
||||
<span className="">
|
||||
<span className="text-red-800">Messy, Distracted</span> Remote
|
||||
Teams.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="my-5 text-lg md:text-xl text-center text-black font-semibold w-max">
|
||||
A <span className="text-teal-600">'less is more'</span>{" "}
|
||||
approach.
|
||||
<br></br>
|
||||
Skip{" "}
|
||||
<img
|
||||
src="/icons/zoom-logo.svg"
|
||||
className="w-[4rem] inline-block h-[2rem] px-1"
|
||||
/>{" "}
|
||||
scheduling, <br className="md:hidden"></br>
|
||||
<img
|
||||
src="/icons/slack-logo.svg"
|
||||
className="inline-block w-[5rem] h-[2rem] px-1"
|
||||
/>{" "}
|
||||
notifications, <br className="md:hidden"></br> and{" "}
|
||||
<img
|
||||
src="/icons/gmail-logo.svg"
|
||||
className="inline-block w-[2rem] h-[1rem]"
|
||||
/>{" "}
|
||||
threads,
|
||||
<br></br>
|
||||
and just talk to your team.
|
||||
<br></br>
|
||||
{/* Improve team focus, performance, and wellbeing. */}
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-5 my-5">
|
||||
<Link href="/features">Features</Link>
|
||||
|
||||
<button
|
||||
onClick={() => window.open("/teams/login", "_self")}
|
||||
className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center justify-evenly space-x-2"
|
||||
>
|
||||
<span>Get Started</span>
|
||||
<FaAngleRight />
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span className="text-center text-xs text-gray-500">
|
||||
Try Nirvana for 2 people for 30 days. <br></br>No credit card
|
||||
required.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* main above fold product image */}
|
||||
<span className="md:flex w-full justify-evenly hidden">
|
||||
<img
|
||||
onClick={() => window.open("/teams/demo", "_blank")}
|
||||
src="/screenshots/frame_safari_dark.png"
|
||||
className="flex-1 min-h-[20rem] min-w-[30rem]"
|
||||
/>
|
||||
</span>
|
||||
{/* image for mobile, just barely see it kind of thing */}
|
||||
<span className="md:hidden">
|
||||
<AntDImage width={800} src="/screenshots/frame_safari_dark.png" />
|
||||
</span>
|
||||
|
||||
{/* voice line section */}
|
||||
<span className="flex flex-row md:py-32 py-10 flex-wrap">
|
||||
<span className="mx-auto flex flex-col grow max-w-sm rounded-lg shadow-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
VOICE ONLY
|
||||
</span>
|
||||
|
||||
<span className="text-left text-3xl text-gray-700 font-bold">
|
||||
Move 10x <span className="text-teal-600">Faster.</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"Resolve issues faster, and improve performance."}
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg text-gray-700"></span>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* checkmarks of value add */}
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<FaCheck className="text-teal-500" />
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Asynchronous."}
|
||||
</span>
|
||||
<Tooltip
|
||||
title={
|
||||
"If you send a voice clip to someone, and they are online, they hear you instantly without changing tabs/windows."
|
||||
}
|
||||
>
|
||||
<FaInfoCircle className="text-lg text-teal-500 animate-bounce" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<FaCheck className="text-teal-500" />
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"NO low-quality chatter."}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Clear Communication."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{/* {"Resolve issues faster, and improve performance."} */}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-left text-md text-gray-600">
|
||||
{
|
||||
"An experience as if your team was across the table. And it's still"
|
||||
}
|
||||
<span className="text-teal-600"> asynchronous.</span>
|
||||
</span>
|
||||
<br></br>
|
||||
<span className="text-left text-md text-gray-600">
|
||||
No more days of{" "}
|
||||
<span className="text-orange-500">back and forth texting</span> for
|
||||
complex, technical issues.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex-row justify-end relative items-baseline flex-1 md:flex hidden">
|
||||
<VoiceLineConceptDemo />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* bond/team/collaborate section */}
|
||||
<span className="flex flex-row items-center md:py-20 flex-wrap">
|
||||
<span className="flex-1 flex flex-row flex-wrap backdrop-blur-md p-10 rounded">
|
||||
{/* illustration of collaborating */}
|
||||
<img
|
||||
src="/illustrations/undraw_team_collaboration_re_ow29.svg"
|
||||
className="min-h-[20rem] min-w-[20rem] shrink-0"
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* description text */}
|
||||
<span className="mx-auto text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
TEAM
|
||||
</span>
|
||||
<span className="text-3xl text-gray-700 font-bold">
|
||||
Bond & Collaborate{" "}
|
||||
<span className="text-teal-600">Seamlessly.</span>
|
||||
</span>
|
||||
<span className="text-lg text-gray-700"></span>
|
||||
<Divider />
|
||||
{/* checkmarks of value add */}
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Spontaneous Conversations."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"No more 'let's find a time to discuss...'"}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Cross Collaborate."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"Glance all of the conversations going on in your team."}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-md text-gray-600">
|
||||
Work in the{" "}
|
||||
<Tooltip
|
||||
title={
|
||||
"Nirvana voice-only rooms to hang out and code, create, ideate..."
|
||||
}
|
||||
>
|
||||
<span className="text-teal-600">
|
||||
'corner' office room
|
||||
</span>{" "}
|
||||
<FaInfoCircle className="text-sm text-teal-500 inline animate-bounce" />
|
||||
</Tooltip>{" "}
|
||||
with your closest teammates throughout the day.
|
||||
</span>
|
||||
<span className="text-md text-gray-600">
|
||||
Have lunch in the 'kitchen' with your team.
|
||||
</span>
|
||||
<span className="text-md text-gray-600">
|
||||
Connect in seconds, resolve matters in minutes.
|
||||
</span>
|
||||
|
||||
<br></br>
|
||||
<span className="text-center">or</span>
|
||||
<br></br>
|
||||
<span className="text-md text-gray-600">
|
||||
Create more formal meeting rooms (
|
||||
<FcGoogle className="inline" /> Meet).
|
||||
<span className="text-teal-600">
|
||||
{" "}
|
||||
Spontaneous, scheduled, or recurring.
|
||||
</span>{" "}
|
||||
All within Nirvana.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* focus on today section */}
|
||||
<span className="flex flex-row items-center md:py-20 py-10 flex-wrap">
|
||||
{/* description card */}
|
||||
<span className="mx-auto text-left flex flex-col grow max-w-lg shadow-lg rounded-lg bg-gray-200 bg-opacity-40 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text font-bold text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
CLARITY
|
||||
</span>
|
||||
<span className="text-3xl text-gray-700 font-bold">
|
||||
Focus on <span className="text-teal-600">Right Now.</span>
|
||||
</span>
|
||||
<span className="text-lg text-gray-700"></span>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* checkmarks of value add */}
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Overall Wellbeing."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500"></span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Clarity of Mind."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{"Come to work seeing only what's important today/this week."}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-baseline space-x-2">
|
||||
<FaCheck className="text-teal-500 text-md shrink-0" />
|
||||
|
||||
<span className="flex flex-col">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-left text-lg text-gray-600">
|
||||
{"Inbox Zero."}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{
|
||||
"Conversations are ephemeral like in real life. We keep you at inbox zero."
|
||||
}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-md text-gray-600">
|
||||
Your <span className="text-orange-500">current tools</span> bombard
|
||||
you with files, notifications, scrolling, clicking, emojis,
|
||||
threads...
|
||||
</span>
|
||||
|
||||
<br></br>
|
||||
|
||||
<span className="text-md text-gray-600">
|
||||
They are designed to{" "}
|
||||
<span className="text-orange-500"> addict you, </span>and keep you
|
||||
<span className="text-orange-500"> distracted.</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex-1 justify-evenly flex flex-row flex-wrap backdrop-blur-md p-10 rounded">
|
||||
{/* illustration of collaborating */}
|
||||
<img
|
||||
src="/illustrations/undraw_freelancer_re_irh4.svg"
|
||||
className="min-h-[20rem] min-w-[20rem] shrink-0"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* action section to get started now */}
|
||||
<LandingPageActionBar />
|
||||
|
||||
{/* customer testimonial section */}
|
||||
<span className="flex my-20 mx-auto flex-col items-center max-w-screen-lg p-10 backdrop-blur-md bg-gray-200 bg-opacity-40 rounded-lg">
|
||||
<span className="text-3xl font-bold">Our Customers</span>
|
||||
<span>
|
||||
<span className="text-teal-600">Listen</span> to what they have to
|
||||
say.
|
||||
</span>
|
||||
|
||||
{/* all voice testimonial cards */}
|
||||
<span className="flex flex-row items-center justify-evenly mt-5">
|
||||
<span className="p-5 flex flex-row items-center bg-white bg-opacity-20 rounded shadow-md">
|
||||
<img
|
||||
src="https://lh3.googleusercontent.com/a-/AOh14GhTB6LbOqohOA3csckho3OA976yp3lMEtl2MDzbgX0=s96-c"
|
||||
className="rounded-full shadow-md h-[3rem]"
|
||||
/>
|
||||
<span className="flex flex-col ml-2 mr-10">
|
||||
<span className="text-lg">Heran Patel</span>
|
||||
<span className="text-gray-400">CEO of FinityOne</span>
|
||||
</span>
|
||||
|
||||
<button className="bg-gray-500 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40">
|
||||
<FaPlay className="text-lg text-gray-500" />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</LangingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { Divider } from "antd";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { FaAngleRight } from "react-icons/fa";
|
||||
import LandingPageActionBar from "../components/demo/LandingPageActionBar";
|
||||
import Rooms from "../components/demo/Rooms";
|
||||
import LangingPageLayout from "../components/Layouts/LandingPageLayout";
|
||||
|
||||
export default function Philosophy() {
|
||||
const handleGetDemo = () => {
|
||||
window.open("https://calendly.com/usenirvana/30min", "_blank");
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const getStartedButton = (
|
||||
<button
|
||||
onClick={handleGetDemo}
|
||||
className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center space-x-2"
|
||||
>
|
||||
<span>Get Demo</span>
|
||||
<FaAngleRight />
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<LangingPageLayout>
|
||||
<span className="flex flex-col my-20 items-center">
|
||||
<span>PHILOSOPHY</span>
|
||||
<span className="text-5xl font-bold text-center">
|
||||
We live in a <span className="text-red-800"> distracted world.</span>{" "}
|
||||
<br></br>
|
||||
<span className="text-teal-600">{"Let's fix it."}</span>
|
||||
</span>
|
||||
<span className="text-gray-500 text-lg">
|
||||
Everything starts with the philosophy.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* main mission */}
|
||||
<div className="mx-auto flex flex-col items-start max-w-screen-sm rounded-lg bg-gray-200 bg-opacity-25 backdrop-blur-xl p-10">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
|
||||
Productivity is a Myth
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg mb-5 text-gray-700">
|
||||
In today's world, we{" "}
|
||||
<span className="text-red-600"> mistake</span> adding software and
|
||||
tools for <span className="text-red-600">productivity.</span>
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg text-gray-700 mb-5">
|
||||
At Nirvana, we are bringing work back to the basics.{" "}
|
||||
<span className="text-teal-600">Voice-only communication </span>{" "}
|
||||
because voice makes us human and less is more. An experience as if
|
||||
your team was{" "}
|
||||
<span className="text-teal-600">right next to you.</span>
|
||||
</span>
|
||||
|
||||
<span className="text-left text-lg text-gray-700">
|
||||
Improve team{" "}
|
||||
<span className="text-teal-600">
|
||||
focus, performance, and wellbeing.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* action section to get started now */}
|
||||
<LandingPageActionBar />
|
||||
</LangingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { Divider } from "antd";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
FaAngleRight,
|
||||
FaArrowRight,
|
||||
FaMoneyBill,
|
||||
FaPhone,
|
||||
} from "react-icons/fa";
|
||||
import LandingPageActionBar from "../components/demo/LandingPageActionBar";
|
||||
import LandingPageLayout from "../components/Layouts/LandingPageLayout";
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<LandingPageLayout>
|
||||
<div className="flex flex-col items-center text-center backdrop-blur-md p-10 lg:my-20 mb-20">
|
||||
<span>PRICING</span>
|
||||
<span className="text-5xl font-bold">Get Started Now,</span>
|
||||
<span className="text-5xl font-bold text-teal-600 mb-2">
|
||||
Pay for Spots Later.
|
||||
</span>
|
||||
<span className="text-gray-500 mb-2">
|
||||
Hit the ground running with{" "}
|
||||
<span className="text-teal-600">2 free spots</span> on sign up.
|
||||
</span>
|
||||
|
||||
<span className="p-2 rounded-lg font-bold text-sm bg-purple-200 text-purple-700">
|
||||
No credit card required
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row items-center space-x-2 mt-10">
|
||||
<Link href="/features">Features</Link>
|
||||
|
||||
<button
|
||||
onClick={() => window.open("/teams/login", "_self")}
|
||||
className="rounded font-semibold bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center justify-evenly space-x-2"
|
||||
>
|
||||
<span>Get Started</span>
|
||||
<FaAngleRight />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="flex flex-row justify-center space-x-5 mb-32 flex-wrap">
|
||||
{/* lite pricing */}
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md w-[22rem] shadow-lg">
|
||||
<span className="flex flex-row items-center justify-between w-full">
|
||||
<span className="text-3xl font-bold">Lite</span>
|
||||
<span className="p-2 rounded-lg font-bold text-left text-sm bg-green-200 text-green-700">
|
||||
FREE
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-500">
|
||||
Hit the ground running with 2 free spots.
|
||||
</span>
|
||||
|
||||
<button
|
||||
onClick={() => window.open("/teams/login", "_self")}
|
||||
className="mt-10 mx-auto rounded font-semibold my-2 p-2 bg-gray-200 text-teal-600 shadow-lg flex flex-row items-center justify-evenly space-x-2"
|
||||
>
|
||||
<span>Get Started</span>
|
||||
<FaAngleRight />
|
||||
</button>
|
||||
<span className="text-gray-500 text-sm text-center w-full">
|
||||
Valid for 30 days.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* startups pricing */}
|
||||
<span className="z-10 flex flex-col items-start bg-white bg-opacity-60 p-10 max-w-sm rounded backdrop-blur-md w-[22rem] scale-125 shadow-lg">
|
||||
<span className="flex flex-row items-center justify-between w-full">
|
||||
<span className="text-3xl font-bold">Startups</span>
|
||||
<span className="p-2 rounded-lg font-bold text-left text-sm bg-sky-200 text-sky-700">
|
||||
POPULAR
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-500">
|
||||
Pay per spot per month based on your needs.
|
||||
</span>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
window.open("https://calendly.com/usenirvana/30min", "_blank")
|
||||
}
|
||||
className="mx-auto mt-10 rounded font-semibold my-2 bg-teal-600 p-2 text-white shadow-lg flex flex-row items-center justify-evenly space-x-2"
|
||||
>
|
||||
<FaPhone />
|
||||
<span>Contact Sales</span>
|
||||
</button>
|
||||
<span className="text-gray-500 text-sm text-center w-full mx-auto">
|
||||
<FaMoneyBill className="inline text-xl text-emerald-500" /> 30 day
|
||||
money back guarantee.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* business pricing */}
|
||||
<span className="flex flex-col items-start bg-white bg-opacity-40 p-10 max-w-sm rounded backdrop-blur-md w-[22rem] shadow-lg">
|
||||
<span className="flex flex-row items-center justify-between w-full">
|
||||
<span className="text-3xl font-bold">Business</span>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-500">
|
||||
Pay for enterprise-level features for your large-scale organization.
|
||||
</span>
|
||||
|
||||
<button
|
||||
onClick={() =>
|
||||
window.open("https://calendly.com/usenirvana/30min", "_blank")
|
||||
}
|
||||
className="mx-auto mt-10 rounded font-semibold my-2 p-2 bg-gray-200 text-teal-600 shadow-lg flex flex-row items-center justify-evenly space-x-2"
|
||||
>
|
||||
<FaPhone />
|
||||
<span>Contact Sales</span>
|
||||
</button>
|
||||
<span className="text-gray-500 text-sm text-center w-full mx-auto">
|
||||
<FaMoneyBill className="inline text-xl text-emerald-500" /> 30 day
|
||||
money back guarantee.
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<LandingPageActionBar />
|
||||
</LandingPageLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "../../components/Dashboard/Header";
|
||||
import Rooms from "../../components/Dashboard/Rooms";
|
||||
import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
|
||||
import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
|
||||
import Loading from "../../components/Loading";
|
||||
import AudioContextProvider from "../../contexts/keyboardContext";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import {
|
||||
TeamDashboardContextProvider,
|
||||
useTeamDashboardContext,
|
||||
} from "../../contexts/teamDashboardContext";
|
||||
import { Team } from "../../models/team";
|
||||
import { TeamMemberStatus } from "../../models/teamMember";
|
||||
import { UserStatus } from "../../models/user";
|
||||
import TeamService from "../../services/teamService";
|
||||
import UserService from "../../services/userService";
|
||||
import Announcements from "../../components/Dashboard/Announcements";
|
||||
import Links from "../../components/Dashboard/Links";
|
||||
import Office from "../../components/Dashboard/Office";
|
||||
import ShortcutHelpModal from "../../components/Modals/ShortcutHelpModal";
|
||||
|
||||
// User has switched back to the tab
|
||||
const onFocus = () => {
|
||||
console.log("Tab is in focus");
|
||||
};
|
||||
|
||||
// User has switched away from the tab (AKA tab is hidden)
|
||||
const onBlur = () => {
|
||||
console.log("Tab is blurred");
|
||||
};
|
||||
|
||||
const alertUserAboutClosing = (ev) => {
|
||||
// change user status to offline
|
||||
|
||||
ev.preventDefault();
|
||||
return (ev.returnValue = "are you sure?");
|
||||
};
|
||||
|
||||
const userService = new UserService();
|
||||
|
||||
function TeamDashboard() {
|
||||
const { currUser } = useAuth();
|
||||
const router = useRouter();
|
||||
const teamDashboardContext = useTeamDashboardContext();
|
||||
|
||||
// user goes offline
|
||||
const handleTabClosing = () => {
|
||||
// change status of user
|
||||
userService.updateUserStatus(currUser.uid, UserStatus.offline);
|
||||
};
|
||||
|
||||
// shows browser alert to warn user of exiting
|
||||
const alertUserAboutClosing = (event: any) => {
|
||||
event.preventDefault();
|
||||
event.returnValue = "";
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// set the document title based on the team
|
||||
// todo: update based on who sent you a message
|
||||
document.title = teamDashboardContext.team.name;
|
||||
|
||||
window.addEventListener("focus", onFocus);
|
||||
window.addEventListener("blur", onBlur);
|
||||
// Calls onFocus when the window first loads
|
||||
onFocus();
|
||||
|
||||
// set user to online until he closes tab/window
|
||||
userService.updateUserStatus(currUser.uid, UserStatus.online);
|
||||
|
||||
window.addEventListener("beforeunload", alertUserAboutClosing);
|
||||
window.addEventListener("unload", handleTabClosing);
|
||||
return () => {
|
||||
// Specify how to clean up after this effect:
|
||||
window.removeEventListener("focus", onFocus);
|
||||
window.removeEventListener("blur", onBlur);
|
||||
window.removeEventListener("beforeunload", alertUserAboutClosing);
|
||||
window.removeEventListener("unload", handleTabClosing);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ShortcutHelpModal />
|
||||
|
||||
<div className="container mx-auto py-10 lg:px-10 flex flex-col space-y-5">
|
||||
<Header />
|
||||
|
||||
<div className="flex flex-row items-start lg:space-x-5 h-[56rem]">
|
||||
<div className="hidden lg:flex flex-col max-w-sm space-y-5 h-full">
|
||||
<Office />
|
||||
|
||||
<TeamVoiceLine />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-5 flex-1 h-full">
|
||||
<Announcements />
|
||||
|
||||
<Rooms />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Links />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TeamDashboardWrapper() {
|
||||
return (
|
||||
<TeamDashboardContextProvider>
|
||||
<AudioContextProvider>
|
||||
<BackgroundLayout>
|
||||
<TeamDashboard />
|
||||
</BackgroundLayout>
|
||||
</AudioContextProvider>
|
||||
</TeamDashboardContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context: GetServerSidePropsContext) {
|
||||
// basic check if this team exists
|
||||
|
||||
// todo check if authenticated
|
||||
|
||||
// todo check if this user is in this team
|
||||
|
||||
return {
|
||||
props: {},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
import { Divider } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Loading from "../../../components/Loading";
|
||||
import {
|
||||
TeamDashboardContextProvider,
|
||||
useTeamDashboardContext,
|
||||
} from "../../../contexts/teamDashboardContext";
|
||||
import {
|
||||
TeamMember,
|
||||
TeamMemberRole,
|
||||
TeamMemberStatus,
|
||||
} from "../../../models/teamMember";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { Team, TeamStatus } from "../../../models/team";
|
||||
|
||||
import {
|
||||
FaMoneyBillWave,
|
||||
FaTrash,
|
||||
FaPaperPlane,
|
||||
FaArrowLeft,
|
||||
} from "react-icons/fa";
|
||||
import TeamService from "../../../services/teamService";
|
||||
import Router from "next/router";
|
||||
import Moment from "react-moment";
|
||||
|
||||
export default function TeamAdminWrapper() {
|
||||
return (
|
||||
<TeamDashboardContextProvider>
|
||||
<TeamAdmin />
|
||||
</TeamDashboardContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const initialSite: string = "https://";
|
||||
|
||||
function renderTeamMemberStatus(status: TeamMemberStatus) {
|
||||
switch (status) {
|
||||
case TeamMemberStatus.invited:
|
||||
return (
|
||||
<span className="text-gray-700 ml-1 bg-gray-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
invited
|
||||
</span>
|
||||
);
|
||||
case TeamMemberStatus.activated:
|
||||
return (
|
||||
<span className="text-sky-700 ml-1 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
active
|
||||
</span>
|
||||
);
|
||||
case TeamMemberStatus.deleted:
|
||||
return (
|
||||
<span className="text-red-700 ml-1 bg-red-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
deleted
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const teamService = new TeamService();
|
||||
|
||||
function TeamAdmin() {
|
||||
const router = useRouter();
|
||||
const { teamid } = router.query;
|
||||
const { team, userTeamMember, teamMembers, user } = useTeamDashboardContext();
|
||||
|
||||
const [error, setError] = useState<string>("");
|
||||
const [teamName, setTeamName] = useState<string>(team.name);
|
||||
const [companySite, setcompanySite] = useState<string>(team.companySite);
|
||||
const [inviteEmail, setInviteEmail] = useState<string>("");
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
(async function () {
|
||||
// have checks for team and part of team or not in context
|
||||
try {
|
||||
// if not admin, I shouldn't be here
|
||||
if (userTeamMember.role != TeamMemberRole.admin) {
|
||||
toast.error("You are not allowed here!");
|
||||
router.push("/teams");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("something went wrong in admin team page");
|
||||
router.push("/teams");
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSubmitTeamUpdate(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
if (!teamName) {
|
||||
setError("You must input a team name!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const updatedTeam = new Team();
|
||||
updatedTeam.id = team.id;
|
||||
updatedTeam.name = teamName;
|
||||
updatedTeam.createdByUserId = user.id;
|
||||
updatedTeam.status = TeamStatus.created;
|
||||
|
||||
if (companySite != initialSite) {
|
||||
// make sure to put null in database for the team
|
||||
updatedTeam.companySite = companySite;
|
||||
}
|
||||
|
||||
// update team name and company site if it changed
|
||||
await teamService.updateTeam(updatedTeam);
|
||||
|
||||
// take user back to team dashboard
|
||||
router.push("/teams/" + team.id);
|
||||
} catch (error) {
|
||||
setError(error.message);
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
async function handleSubmitNewTeamMember(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
if (!inviteEmail) {
|
||||
setError("You must input a valid email!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const newInviteTeamMember = new TeamMember();
|
||||
newInviteTeamMember.inviteEmailAddress = inviteEmail;
|
||||
newInviteTeamMember.invitedByUserId = user.id;
|
||||
newInviteTeamMember.status = TeamMemberStatus.invited;
|
||||
newInviteTeamMember.teamId = team.id;
|
||||
|
||||
await teamService.createTeamInvite(newInviteTeamMember);
|
||||
|
||||
Router.reload();
|
||||
} catch (error) {
|
||||
toast.error("something went wrong");
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteTeamMember(e, teamMemberId: string) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await teamService.updateTeamMemberStatus(
|
||||
teamMemberId,
|
||||
TeamMemberStatus.deleted
|
||||
);
|
||||
|
||||
Router.reload();
|
||||
} catch (error) {
|
||||
toast.error("unable to delete team member");
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
async function handleInviteTeamMember(e, teamMemberId: string) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await teamService.updateTeamMemberStatus(
|
||||
teamMemberId,
|
||||
TeamMemberStatus.invited
|
||||
);
|
||||
|
||||
Router.reload();
|
||||
} catch (error) {
|
||||
toast.error("unable to delete team member");
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
// get count of all active and invited users...
|
||||
const activeOrInvited = teamMembers.filter(
|
||||
(tmember) =>
|
||||
tmember.status == TeamMemberStatus.invited ||
|
||||
tmember.status == TeamMemberStatus.activated
|
||||
);
|
||||
const teamSpotsRemaining =
|
||||
(team.allowedUserCount || 0) - activeOrInvited.length - 1;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-screen-sm m-10 bg-white p-10 rounded-lg shadow-md">
|
||||
<form
|
||||
onSubmit={handleSubmitTeamUpdate}
|
||||
className="flex flex-col space-y-5"
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg flex flex-row items-center space-x-2">
|
||||
<FaArrowLeft
|
||||
className="hover:cursor-pointer"
|
||||
onClick={() => router.push("/teams/" + teamid)}
|
||||
/>{" "}
|
||||
<span>Manage Team</span>
|
||||
</div>
|
||||
|
||||
{error && <span className="text-red-300 text-md">{error}</span>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Team Name</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
Everyone in your team will see this.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. AirBnB"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Company Site</span>
|
||||
<span className="text-gray-300 text-xs mb-2">optional</span>
|
||||
<input
|
||||
placeholder="ex. https://"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={companySite}
|
||||
onChange={(e) => setcompanySite(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
<button
|
||||
onClick={() => router.push("/teams/" + team.id)}
|
||||
className="bg-gray-100 py-2 px-5 rounded text-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</span>
|
||||
</form>
|
||||
|
||||
<form
|
||||
className="flex flex-col space-y-5"
|
||||
onSubmit={handleSubmitNewTeamMember}
|
||||
>
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-start items-start">
|
||||
<FaMoneyBillWave className="text-5xl text-green-500" />
|
||||
|
||||
<span className="flex flex-col justify-start ml-2">
|
||||
<span className="text-md ">Billing</span>
|
||||
<span className="text-md text-gray-500 mr-20">
|
||||
Please email{" "}
|
||||
<button className="underline decoration-teal-500 text-brown-500">
|
||||
usenirvana@gmail.com
|
||||
</button>{" "}
|
||||
to open more spots for your team.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="ml-auto text-center text-orange-700 bg-orange-200 p-1 rounded-md text-sm font-bold mt-2">
|
||||
{teamSpotsRemaining} spots remaining
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="text-md">Team</span>
|
||||
|
||||
{/* current user */}
|
||||
<div className="flex flex-row">
|
||||
<img src={user.avatarUrl} alt="asdf" className="rounded-full w-12" />
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-md text-gray-500">
|
||||
{user.firstName + " " + user.lastName}
|
||||
|
||||
<span className="text-green-700 ml-1 bg-green-200 p-1 rounded-md text-xs font-bold mt-2">
|
||||
admin
|
||||
</span>
|
||||
|
||||
{renderTeamMemberStatus(userTeamMember.status)}
|
||||
</span>
|
||||
<span className="text-xs text-gray-200">{user.emailAddress}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* mapping all team members */}
|
||||
{teamMembers.map((tmember, i) => {
|
||||
return (
|
||||
<div key={i} className="flex flex-row items-center">
|
||||
<div className="rounded-full w-12 animate-pulse bg-gray-200 h-12" />
|
||||
|
||||
<span className="flex flex-col items-start ml-2">
|
||||
<span className="text-md text-gray-500">
|
||||
{tmember.inviteEmailAddress}
|
||||
|
||||
{renderTeamMemberStatus(tmember.status)}
|
||||
</span>
|
||||
|
||||
{/* todo: date joined */}
|
||||
{/* <Moment date={tmember} className="text-xs text-gray-200" /> */}
|
||||
</span>
|
||||
|
||||
{tmember.status == TeamMemberStatus.deleted &&
|
||||
teamSpotsRemaining > 0 ? (
|
||||
<button
|
||||
onClick={(e) => handleInviteTeamMember(e, tmember.id)}
|
||||
className="ml-auto bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaPaperPlane className="text-sm text-teal-500 " />
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{tmember.status == TeamMemberStatus.invited ||
|
||||
tmember.status == TeamMemberStatus.activated ? (
|
||||
<button
|
||||
onClick={(e) => handleDeleteTeamMember(e, tmember.id)}
|
||||
className="bg-orange-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaTrash className="text-sm text-orange-500 " />
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* input for adding people */}
|
||||
{teamSpotsRemaining > 0 ? (
|
||||
<>
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Add Members</span>
|
||||
<span className="text-red-300 text-md mb-2">
|
||||
IMPORTANT: Tell them to sign up at{" "}
|
||||
<span className="underline decoration-teal-500">
|
||||
usenirvana.com{" "}
|
||||
</span>{" "}
|
||||
using this same email address.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. [email protected]"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={inviteEmail}
|
||||
onChange={(e) => setInviteEmail(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
{inviteEmail ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-gray-200 rounded"
|
||||
disabled
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { Divider } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import { Team, TeamStatus } from "../../models/team";
|
||||
import { User, UserStatus } from "../../models/user";
|
||||
import TeamService from "../../services/teamService";
|
||||
|
||||
const initialSite: string = "https://";
|
||||
|
||||
const teamService = new TeamService();
|
||||
|
||||
export default function CreateTeam() {
|
||||
const { currUser } = useAuth();
|
||||
const [error, setError] = useState<string>("");
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
(async function () {
|
||||
try {
|
||||
// if not authenticated, take user to the login
|
||||
if (!currUser) {
|
||||
console.log(
|
||||
"not authenticated...routing from dashboard to teams home"
|
||||
);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
|
||||
// todo if user is in a team already, notify them to make sure
|
||||
// buttt most likely will already be routed to the correct place from the router...don't do the router's job
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setLoading(true);
|
||||
|
||||
if (!teamName) {
|
||||
setError("You must input a team name!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const team = new Team();
|
||||
team.name = teamName;
|
||||
team.createdByUserId = currUser.uid;
|
||||
team.status = TeamStatus.created;
|
||||
team.allowedUserCount = 2;
|
||||
|
||||
if (companySite != initialSite) {
|
||||
// make sure to put null in database for the team
|
||||
team.companySite = companySite;
|
||||
}
|
||||
|
||||
// provision a team with state of initiated
|
||||
const createdTeamId = await teamService.createTeam(team);
|
||||
router.push("/teams/" + createdTeamId);
|
||||
} catch (error) {
|
||||
setError(error.message);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const [teamName, setTeamName] = useState<string>("");
|
||||
const [companySite, setcompanySite] = useState<string>(initialSite);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg">🙌Create a Team</div>
|
||||
|
||||
{error && <span className="text-red-300 text-md">{error}</span>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Team Name</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
Everyone in your team will see this. You can always change this later.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. AirBnB"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={teamName}
|
||||
onChange={(e) => setTeamName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Company Site</span>
|
||||
<span className="text-gray-300 text-xs mb-2">optional</span>
|
||||
<input
|
||||
placeholder="ex. https://"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={companySite}
|
||||
onChange={(e) => setcompanySite(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
router.push("/teams");
|
||||
}}
|
||||
className="bg-gray-100 py-2 px-5 rounded text-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{loading ? (
|
||||
<div
|
||||
className="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-600"
|
||||
role="status"
|
||||
>
|
||||
<span className="text-black hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
{"Continue ->"}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,855 @@
|
||||
import Head from 'next/head'
|
||||
import Image from 'next/image';
|
||||
import React from 'react';
|
||||
import { FaMicrophoneAlt,
|
||||
FaHeadphonesAlt,
|
||||
FaTh,
|
||||
FaAngleDown,
|
||||
FaPlusSquare,
|
||||
FaBroom,
|
||||
FaBell,
|
||||
FaFilePdf,
|
||||
FaCopy,
|
||||
FaClock,
|
||||
FaPlay,
|
||||
FaPlus,
|
||||
FaCheck,
|
||||
FaCode,
|
||||
FaLink,
|
||||
FaExternalLinkAlt,
|
||||
FaArchive,
|
||||
FaAtlassian,
|
||||
FaSearch
|
||||
|
||||
} from "react-icons/fa";
|
||||
import { IoPulseOutline, IoRemoveOutline, IoTimer } from "react-icons/io5";
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
|
||||
import { UserStatus, User } from '../../models/user'
|
||||
import { KeyCode } from '../../globals/keycode'
|
||||
|
||||
import BackgroundLayout from '../../components/Layouts/BackgroundLayout'
|
||||
|
||||
let testFriends = [
|
||||
{
|
||||
name: "Liam",
|
||||
role: "engineer",
|
||||
systemAvatar: "29",
|
||||
status: UserStatus.online
|
||||
},
|
||||
{
|
||||
name: "Emily",
|
||||
role: "engineer",
|
||||
systemAvatar: "02",
|
||||
status: UserStatus.online
|
||||
},
|
||||
{
|
||||
name: "Paul",
|
||||
role: "architect",
|
||||
systemAvatar: "43",
|
||||
status: UserStatus.online
|
||||
},
|
||||
{
|
||||
name: "Mark",
|
||||
role: "engineer",
|
||||
systemAvatar: "04",
|
||||
status: UserStatus.busy
|
||||
},
|
||||
{
|
||||
name: "Adriana",
|
||||
role: "design",
|
||||
systemAvatar: "06",
|
||||
status: UserStatus.busy
|
||||
},
|
||||
{
|
||||
name: "Josh",
|
||||
role: "design",
|
||||
systemAvatar: "05",
|
||||
status: UserStatus.offline
|
||||
}
|
||||
]
|
||||
|
||||
function getUser(name: string) : User {
|
||||
return new User()
|
||||
}
|
||||
|
||||
type MyState = {
|
||||
selectedChannel?: number
|
||||
};
|
||||
|
||||
|
||||
export default class Demo extends React.Component<{ }, MyState> {
|
||||
state: MyState = {
|
||||
selectedChannel: null
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
document.addEventListener("keydown", this.handleKeyboardShortcut)
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
document.removeEventListener("keydown", this.handleKeyboardShortcut);
|
||||
}
|
||||
|
||||
statusBubble(status: UserStatus) {
|
||||
console.log(status)
|
||||
|
||||
switch(status) {
|
||||
case UserStatus.online:
|
||||
return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
case UserStatus.busy:
|
||||
return <span className="absolute top-0 right-0 w-3 h-3 bg-orange-400 rounded-full"></span>
|
||||
case UserStatus.offline:
|
||||
return <span className="absolute top-0 right-0 w-3 h-3 bg-gray-400 rounded-full"></span>
|
||||
default:
|
||||
return <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
}
|
||||
}
|
||||
|
||||
renderPulse(status: UserStatus) {
|
||||
switch(status) {
|
||||
case UserStatus.online:
|
||||
return <IoPulseOutline className="text-green-500 text-2xl animate-pulse mx-2 ml-auto" />
|
||||
case UserStatus.busy:
|
||||
return <IoPulseOutline className="text-orange-400 text-2xl animate-pulse mx-2 ml-auto" />
|
||||
case UserStatus.offline:
|
||||
return <IoRemoveOutline className="text-gray-400 text-2xl mx-2 ml-auto" />
|
||||
default:
|
||||
return <IoPulseOutline className="text-green-400 text-2xl animate-pulse mx-2 ml-auto" />
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyboardShortcut = (event) => {
|
||||
console.log(event.keyCode)
|
||||
|
||||
switch(event.keyCode) {
|
||||
case KeyCode.Escape:
|
||||
this.setState({
|
||||
selectedChannel: null
|
||||
})
|
||||
break
|
||||
case KeyCode.Zero:
|
||||
this.setState({
|
||||
selectedChannel: 0
|
||||
});
|
||||
break
|
||||
case KeyCode.One:
|
||||
this.setState({
|
||||
selectedChannel: 1
|
||||
});
|
||||
break
|
||||
case KeyCode.Two:
|
||||
this.setState({
|
||||
selectedChannel: 2
|
||||
});
|
||||
break
|
||||
case KeyCode.Three:
|
||||
this.setState({
|
||||
selectedChannel: 3
|
||||
});
|
||||
break
|
||||
case KeyCode.Four:
|
||||
this.setState({
|
||||
selectedChannel: 4
|
||||
});
|
||||
break
|
||||
case KeyCode.Five:
|
||||
this.setState({
|
||||
selectedChannel: 5
|
||||
});
|
||||
break
|
||||
default:
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<BackgroundLayout>
|
||||
<div className="container mx-auto max-w-screen-xl py-10 flex flex-col space-y-5">
|
||||
{/* header content */}
|
||||
<section className="flex-1 flex flex-row items-center justify-between py-5">
|
||||
{/* welcome message */}
|
||||
<span className='flex flex-col items-baseline'>
|
||||
<span className="font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>
|
||||
|
||||
{/* Date and time */}
|
||||
<span className='flex flex-row space-x-2'>
|
||||
<span className='text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2'>Tues, Jan 11th</span>
|
||||
<span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold mt-2'>1:34am</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* avatar */}
|
||||
<span className="flex flex-row items-center space-x-5">
|
||||
{/* search bar */}
|
||||
<div className="pt-2 flex flex-row relative items-center">
|
||||
<button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
|
||||
<FaSearch className='text-white' />
|
||||
</button>
|
||||
|
||||
<input className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
|
||||
type="search" name="search" placeholder="Search" />
|
||||
|
||||
<button className="absolute right-1 rounded-lg py-1 px-2 ml-1
|
||||
shadow-md text-center text-white text-sm font-bold">
|
||||
CTRL + K
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<FaBell className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||
<FaHeadphonesAlt className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||
<FaMicrophoneAlt className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||
<FaTh className='text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer' />
|
||||
|
||||
{/* avatar */}
|
||||
<span className='relative flex'>
|
||||
<span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
||||
<Image src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg" alt="profile" width={50} height={50} />
|
||||
</span>
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<div className='flex flex-row items-baseline space-x-5 space-y-5 flex-wrap'>
|
||||
{/* personal line */}
|
||||
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
||||
<span className='flex flex-row justify-start items-center pb-5'>
|
||||
<span className='flex flex-col'>
|
||||
<span className="text-white">TEAM</span>
|
||||
</span>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
|
||||
<FaPlus className='text-lg text-white' />
|
||||
</button>
|
||||
</span>
|
||||
|
||||
|
||||
{/* list of team members */}
|
||||
{
|
||||
testFriends.map((friend, i) => {
|
||||
return (
|
||||
<span key={i} className={"flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 " + (this.state.selectedChannel == i ? "bg-white bg-opacity-80 scale-105 shadow-2xl" : " ")}>
|
||||
<span className='relative flex mr-2'>
|
||||
<span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
|
||||
{this.statusBubble(friend.status)}
|
||||
|
||||
<Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (friend.systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
|
||||
</span>
|
||||
|
||||
<span className='flex flex-col mr-10'>
|
||||
<span className='flex flex-row items-center space-x-2'>
|
||||
<span className="text-sm text-white font-bold">{friend.name} </span>
|
||||
{
|
||||
this.state.selectedChannel == i ?
|
||||
<>
|
||||
<button className="rounded-lg bg-gray-400 shadow-lg text-center
|
||||
text-white text-sm py-1 px-2 font-bold">
|
||||
{i}
|
||||
</button>
|
||||
</>
|
||||
|
||||
:
|
||||
<button className="rounded-lg border py-1 px-2 border-gray-100 shadow-md
|
||||
text-center text-gray-200 text-smf font-bold">
|
||||
{i}
|
||||
</button>
|
||||
}
|
||||
</span>
|
||||
|
||||
|
||||
<span className={"text-xs span-sans text-gray-300" + (this.state.selectedChannel == i ? "text-black" : " ")}>{friend.role}</span>
|
||||
</span>
|
||||
|
||||
{this.renderPulse(friend.status)}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
</section>
|
||||
|
||||
<div className='flex-1 flex flex-col space-y-5 items-baseline'>
|
||||
{/* pinned */}
|
||||
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
||||
<span className='flex flex-row justify-start items-center pb-5'>
|
||||
<span className='flex flex-col mr-20'>
|
||||
<span className="text-white mr-auto">ANNOUNCEMENTS
|
||||
<button className="right-1 rounded-lg py-1 px-2 ml-1
|
||||
shadow-md text-center text-white text-sm font-bold">
|
||||
CTRL + A
|
||||
</button>
|
||||
</span>
|
||||
<span className='text-gray-300 text-xs'>updates, pep talks, blockers, reminders</span>
|
||||
</span>
|
||||
|
||||
{/* tab pane */}
|
||||
<span className='ml-auto flex flex-row space-x-5 uppercase mr-5'>
|
||||
<span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>Active</span>
|
||||
|
||||
<span className='text-gray-300 hover:text-white hover:cursor-pointer'>Resolved</span>
|
||||
</span>
|
||||
|
||||
<span className='text-sm text-gray-300 flex flex-row items-center'>
|
||||
TODAY <FaAngleDown />
|
||||
</span>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaMicrophoneAlt className='text-lg text-white' />
|
||||
</button>
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaPlay className='text-lg text-white' />
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div className="flex flex-row overflow-auto whitespace-nowrap space-x-5 items-center">
|
||||
{/* adriana's announcement */}
|
||||
<span className='flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center'>
|
||||
<span className='relative mr-2 grid items-center justify-items-center'>
|
||||
<span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
|
||||
{this.statusBubble(UserStatus.busy)}
|
||||
|
||||
<Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={50} height={50} />
|
||||
</span>
|
||||
|
||||
<span className='flex flex-col items-baseline'>
|
||||
<span className='text-md font-bold text-white'>Adriana</span>
|
||||
<span className='text-xs text-gray-200'>5 minutes ago</span>
|
||||
<span className='text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center'>
|
||||
<span>blockers</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* arjun's announcement */}
|
||||
<span className='flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center'>
|
||||
<span className='relative mr-2 grid items-center justify-items-center'>
|
||||
<span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
|
||||
{this.statusBubble(UserStatus.busy)}
|
||||
|
||||
<Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={50} height={50} />
|
||||
</span>
|
||||
|
||||
<span className='flex flex-col items-baseline mr-5'>
|
||||
<span className='text-md font-bold text-white'>Arjun</span>
|
||||
<span className='text-xs text-gray-200'>30 minutes ago</span>
|
||||
<span className='text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center'>
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaCheck className='text-lg text-white' />
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* rooms */}
|
||||
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
||||
<span className='flex flex-row justify-end space-x-3 pb-5 items-center'>
|
||||
<span className="text-white mr-auto">ROOMS
|
||||
<button className="right-1 rounded-lg py-1 px-2 ml-1
|
||||
shadow-md text-center text-white text-sm font-bold">
|
||||
CTRL + R
|
||||
</button>
|
||||
</span>
|
||||
|
||||
{/* tab pane */}
|
||||
<span className='flex flex-row space-x-5 uppercase mr-5'>
|
||||
<span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>All</span>
|
||||
|
||||
<span className='text-gray-300 hover:text-white hover:cursor-pointer'>Live</span>
|
||||
|
||||
<span className='text-gray-300 hover:text-white hover:cursor-pointer'>Scheduled</span>
|
||||
|
||||
<span className='text-gray-300 hover:text-white hover:cursor-pointer'>Recurring</span>
|
||||
</span>
|
||||
|
||||
<span className='text-sm text-gray-300 flex flex-row items-center uppercase'>
|
||||
Week <FaAngleDown />
|
||||
</span>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
|
||||
<FaPlus className='text-lg text-white' />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-xl text-white' />
|
||||
</span>
|
||||
|
||||
{/* all rooms */}
|
||||
<span className='flex flex-row flex-wrap'>
|
||||
{/* spontaneous bugs room */}
|
||||
<span className='flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
{/* header */}
|
||||
<span className='flex flex-1 flex-row justify-between items-baseline space-x-1 p-5'>
|
||||
{/* meeting details */}
|
||||
<span className='flex flex-col items-baseline max-w-xs pr-10'>
|
||||
<span className='text-gray-500 font-semibold mr-auto'>bug fixing</span>
|
||||
<span className='text-xs text-gray-400 overflow-wrap'>were just fixing that jsx bug thats a paiiinnnn</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className='flex flex-row flex-wrap'>
|
||||
<span className='text-xs m-1 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row items-center'>
|
||||
<span>blockers</span>
|
||||
</span>
|
||||
|
||||
<span className='text-xs m-1 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row items-center'>
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className='flex flex-col items-end space-y-1 justify-between h-full'>
|
||||
<span className='text-xs bg-red-500
|
||||
text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center'>
|
||||
<FaClock />
|
||||
<span>live</span>
|
||||
</span>
|
||||
|
||||
{/* room attachments */}
|
||||
<span className='flex flex-row space-x-2'>
|
||||
<button className='bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
|
||||
<FaLink className='text-sm text-gray-400' />
|
||||
</button>
|
||||
|
||||
<button className='bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
|
||||
<FaLink className='text-sm text-gray-400' />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className='relative flex'>
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-20.svg"} alt="profile" width={30} height={30} />
|
||||
</span>
|
||||
<span className='-mr-4 relative flex'>
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"} alt="profile" width={30} height={30} />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='text-xs text-gray-400'>Arjun and Liam</span>
|
||||
|
||||
<button className='ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded'>👋 Leave</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' /> </span>
|
||||
</span>
|
||||
|
||||
{/* live room - design meeting */}
|
||||
<span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
{/* header */}
|
||||
<span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
|
||||
{/* meeting details */}
|
||||
<span className='flex flex-col items-baseline max-w-xs pr-20'>
|
||||
<span className='text-white font-semibold mr-auto'>Shopping Cart Experience</span>
|
||||
<span className='text-xs text-gray-200 overflow-wrap'>lets finish the mockups @josh, @mark, and @arjun please step in for feedback</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className='flex flex-row flex-wrap space-x-2'>
|
||||
<span className='text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
|
||||
<span>design</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className='flex flex-col items-end justify-between h-full'>
|
||||
<span className='text-xs bg-red-500
|
||||
text-white font-bold p-1 rounded-md flex flex-row space-x-2 items-center'>
|
||||
<FaClock />
|
||||
<span>live</span>
|
||||
</span>
|
||||
<span className='text-gray-200 text-xs text-right mb-auto'>on and off all day</span>
|
||||
|
||||
{/* room attachments */}
|
||||
<span className='flex flex-row space-x-2'>
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
|
||||
<FaLink className='text-sm text-white' />
|
||||
</button>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
|
||||
<FaLink className='text-sm text-white' />
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className='relative flex'>
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='text-xs text-white'>Adriana</span>
|
||||
|
||||
<button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
|
||||
Join
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* scheduled room - one on one */}
|
||||
<span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
{/* header */}
|
||||
<span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
|
||||
{/* meeting details */}
|
||||
<span className='flex flex-col items-baseline max-w-xs pr-20'>
|
||||
<span className='text-white font-semibold mr-auto'>Arjun and Paul - One on one</span>
|
||||
<span className='text-xs text-gray-200 overflow-wrap'>performance review</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className='flex flex-row flex-wrap space-x-2'>
|
||||
<span className='text-xs my-3 text-white bg-gray-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
|
||||
<span>private</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className='flex flex-col items-end'>
|
||||
<span className='text-blue-700 bg-blue-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
|
||||
<FaClock />
|
||||
<span>scheduled</span>
|
||||
</span>
|
||||
|
||||
<span className='text-gray-200 text-xs text-center'>3ish? Ill ping you Arjun</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
<button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
|
||||
Join
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' /> </span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - dsu */}
|
||||
<span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
{/* header */}
|
||||
<span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
|
||||
{/* meeting details */}
|
||||
<span className='flex flex-col items-baseline max-w-xs pr-20'>
|
||||
<span className='text-white font-semibold mr-auto'>
|
||||
Daily Standup
|
||||
</span>
|
||||
<span className='text-xs text-gray-200 overflow-wrap'></span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className='flex flex-row flex-wrap space-x-2'>
|
||||
<span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
|
||||
<span>scrum</span>
|
||||
</span>
|
||||
|
||||
<span className='text-xs my-3 text-white bg-indigo-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className='flex flex-col items-center justify-start'>
|
||||
<span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className='text-gray-200 text-xs'>10am daily</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
|
||||
<button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
|
||||
Join
|
||||
</button>
|
||||
|
||||
<button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaBell className='text-sm text-orange-500' />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' /> </span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - demo */}
|
||||
<span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
{/* header */}
|
||||
<span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
|
||||
{/* meeting details */}
|
||||
<span className='flex flex-col items-baseline max-w-xs pr-20'>
|
||||
<span className='text-white font-semibold mr-auto'>
|
||||
Sprint Demo
|
||||
</span>
|
||||
<span className='text-xs text-gray-200 overflow-wrap'>all hands on deck...lets have fun :)</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className='flex flex-row flex-wrap space-x-2'>
|
||||
<span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
|
||||
<span>scrum</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className='flex flex-col items-center justify-start'>
|
||||
<span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className='text-gray-200 text-xs text-center'>biweekly fridays!</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
|
||||
<button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
|
||||
Join
|
||||
</button>
|
||||
|
||||
<button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaBell className='text-sm text-orange-500' />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' /> </span>
|
||||
</span>
|
||||
|
||||
{/* recurring room - wine wednesdays */}
|
||||
<span className='flex flex-col bg-gray-300 bg-opacity-25 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
|
||||
{/* header */}
|
||||
<span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
|
||||
{/* meeting details */}
|
||||
<span className='flex flex-col items-baseline max-w-xs pr-20'>
|
||||
<span className='text-white font-semibold mr-auto'>
|
||||
Wine Wednesdays
|
||||
</span>
|
||||
<span className='text-xs text-gray-200 overflow-wrap'>@JOSH YOU BETTER COME</span>
|
||||
|
||||
{/* badges and tags */}
|
||||
<span className='flex flex-row flex-wrap space-x-2'>
|
||||
<span className='text-xs my-3 text-white bg-lime-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
|
||||
<span>party 🎉</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* room status */}
|
||||
<span className='flex flex-col items-end'>
|
||||
<span className='text-yellow-700 bg-yellow-200 p-1 rounded-md text-xs font-bold flex flex-row items-center space-x-1'>
|
||||
<IoTimer />
|
||||
<span>recurring</span>
|
||||
</span>
|
||||
|
||||
<span className='text-gray-200 text-xs text-right'>wednesdays 7-9pm</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
|
||||
<button className='ml-auto text-sm font-semibold py-1 px-4 rounded bg-gray-300 text-green-500'>
|
||||
Join
|
||||
</button>
|
||||
|
||||
<button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaBell className='text-sm text-orange-500' />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-white ml-2 hover:cursor-pointer' />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* attachments */}
|
||||
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
||||
{/* header row */}
|
||||
<span className='flex flex-row justify-start pb-5 items-center'>
|
||||
<span className='flex flex-col mr-20'>
|
||||
<span className="text-white mr-auto">Attachments
|
||||
<button className="rounded-lg border py-1 px-2 ml-1 border-gray-100
|
||||
shadow-md text-center text-gray-200 text-sm font-bold">
|
||||
T
|
||||
</button>
|
||||
<button className="rounded-lg border py-1 px-2 ml-1 border-gray-100
|
||||
shadow-md text-center text-gray-200 text-sm font-bold">
|
||||
CTRL + V
|
||||
</button>
|
||||
</span>
|
||||
<span className='text-gray-300 text-xs'>code, links (jira tickets, drive folders, powerpoints), screenshots</span>
|
||||
</span>
|
||||
|
||||
{/* tab pane */}
|
||||
<span className='ml-auto flex flex-row space-x-5 uppercase mr-5'>
|
||||
<span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>Team</span>
|
||||
|
||||
<span className='text-gray-300 hover:text-white hover:cursor-pointer'>Personal</span>
|
||||
|
||||
<span className='text-gray-300 hover:text-white hover:cursor-pointer'>Favorites</span>
|
||||
</span>
|
||||
|
||||
<span className='text-sm mr-5 text-gray-300 flex flex-row items-center'>
|
||||
TODAY <FaAngleDown />
|
||||
</span>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40'>
|
||||
<FaCode className='text-lg text-white' />
|
||||
</button>
|
||||
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaLink className='text-lg text-white' />
|
||||
</button>
|
||||
|
||||
<BsThreeDots className='text-xl text-white ml-2' />
|
||||
</span>
|
||||
|
||||
{/* row of attachments */}
|
||||
<div className='flex flex-row flex-wrap space-x-2'>
|
||||
{/* pdf example */}
|
||||
<span className='flex flex-col rounded-lg'>
|
||||
{/* attmnt header */}
|
||||
<span className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start'>
|
||||
<FaFilePdf className='text-4xl text-orange-300 mr-2' />
|
||||
|
||||
<span className='flex flex-col items-baseline mr-10 space-y-1'>
|
||||
<span className='text-md font-bold text-white'>report.pdf</span>
|
||||
|
||||
<span className='text-xs text-white bg-red-400 p-1 rounded-md font-semibold flex flex-row items-center'>
|
||||
<span>blockers</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* attachment actions */}
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
|
||||
<FaCopy className='text-sm text-white' />
|
||||
</button>
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaExternalLinkAlt className='text-sm text-white' />
|
||||
</button>
|
||||
|
||||
<button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaArchive className='text-sm text-orange-500 ' />
|
||||
</button>
|
||||
</span>
|
||||
|
||||
{/* attmnt footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className='relative flex'>
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='flex flex-col items-baseline'>
|
||||
<span className='text-xs text-gray-200 font-bold'>Adriana</span>
|
||||
<span className='text-xs text-gray-200 font-extralight'>5 minutes ago</span>
|
||||
</span>
|
||||
|
||||
<BsThreeDots className='text-white ml-auto hover:cursor-pointer' />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* jira example */}
|
||||
<span className='flex flex-col rounded-lg'>
|
||||
{/* attmnt header */}
|
||||
<span className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start'>
|
||||
<FaAtlassian className='text-4xl text-sky-300 mr-2' />
|
||||
|
||||
<span className='flex flex-col items-baseline mr-10 space-y-1'>
|
||||
<span className='text-md font-bold text-white'>RAM-22</span>
|
||||
<span className='text-xs text-gray-200'>technical doc - stripe</span>
|
||||
|
||||
<span className='text-xs text-white bg-indigo-400 p-1 rounded-md font-semibold flex flex-row items-center'>
|
||||
<span>engineering</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* attachment actions */}
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40'>
|
||||
<FaCopy className='text-sm text-white' />
|
||||
</button>
|
||||
<button className='bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaExternalLinkAlt className='text-sm text-white' />
|
||||
</button>
|
||||
|
||||
<button className='bg-orange-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40'>
|
||||
<FaArchive className='text-sm text-orange-500' />
|
||||
</button>
|
||||
</span>
|
||||
|
||||
{/* attmnt footer */}
|
||||
<span className='flex flex-row items-center bg-gray-400 bg-opacity-30 p-3'>
|
||||
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
|
||||
<span className='relative flex'>
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
<Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-43.svg"} alt="profile" width={30} height={30} />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className='flex flex-col items-baseline'>
|
||||
<span className='text-xs text-gray-200 font-bold'>Paul</span>
|
||||
<span className='text-xs text-gray-200 font-extralight'>2 hours ago</span>
|
||||
</span>
|
||||
|
||||
<BsThreeDots className='text-white ml-auto hover:cursor-pointer' />
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className='fixed bottom-10 w-full -z-10'>
|
||||
{/* dynamic footer based on selection */}
|
||||
<section className={"flex flex-row bg-gray-300 max-w-screen-md mx-auto p-5 shadow-xl rounded-xl justify-between ease-in-out duration-300 scale-0" + (this.state.selectedChannel != null ? "scale-100" : " ")}>
|
||||
<span className='flex flex-row'>
|
||||
<span className='relative flex mr-2'>
|
||||
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
|
||||
|
||||
{this.statusBubble(UserStatus.online)}
|
||||
|
||||
<Image src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-" + (this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].systemAvatar) + ".svg"} alt="profile" width={50} height={50} />
|
||||
</span>
|
||||
|
||||
<span className='flex flex-col'>
|
||||
<span className="text-sm text-black font-bold">{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].name} </span>
|
||||
|
||||
<span className={"text-xs text-gray-300"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* shortcuts */}
|
||||
<span className='flex flex-row space-x-3'>
|
||||
<span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-10 h-10 text-center animate-pulse">
|
||||
<span className="text-white text-sm font-bold">R</span>
|
||||
</span>
|
||||
<span className="rounded-lg p-2 ml-auto bg-gray-400 shadow-lg w-20 h-10 text-center animate-pulse">
|
||||
<span className="text-white text-sm font-bold">SPACE</span>
|
||||
</span>
|
||||
</span>
|
||||
</section>
|
||||
</div>
|
||||
</BackgroundLayout>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import UserService from "../../services/userService";
|
||||
import { User } from "../../models/user";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import firebaseAdmin from "firebase-admin";
|
||||
import {
|
||||
FaPeopleCarry,
|
||||
FaArrowRight,
|
||||
FaBullhorn,
|
||||
FaPlus,
|
||||
} from "react-icons/fa";
|
||||
import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
|
||||
import TeamService from "../../services/teamService";
|
||||
import Loading from "../../components/Loading";
|
||||
import { TeamMemberStatus } from "../../models/teamMember";
|
||||
import { Divider, Tooltip } from "antd";
|
||||
import { Team } from "../../models/team";
|
||||
import moment from "moment";
|
||||
|
||||
/**
|
||||
* figure out where to take the user based on everything
|
||||
*/
|
||||
|
||||
const userService: UserService = new UserService();
|
||||
const teamService: TeamService = new TeamService();
|
||||
|
||||
function RouteHandler() {
|
||||
const { currUser } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
const [loading, setLoading] = useState<Boolean>(true);
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
(async function () {
|
||||
try {
|
||||
// if not authenticated, take user to the login
|
||||
if (!currUser) {
|
||||
console.log(
|
||||
"not authenticated...routing from dashboard to teams home"
|
||||
);
|
||||
router.push("/teams/login");
|
||||
return;
|
||||
}
|
||||
|
||||
// get user
|
||||
const returnedUser: User | null = await userService.getUser(
|
||||
currUser.uid
|
||||
);
|
||||
|
||||
// if user has no profile, then go to create profile
|
||||
if (
|
||||
!returnedUser ||
|
||||
!returnedUser.firstName ||
|
||||
!returnedUser.lastName ||
|
||||
!returnedUser.nickName
|
||||
) {
|
||||
console.log("no profile for the user, routing him/her there");
|
||||
router.push("/teams/profile");
|
||||
return;
|
||||
}
|
||||
setUser(returnedUser);
|
||||
|
||||
// get all teams that this user id is active in
|
||||
// get all of the teams that this user's email is invited to
|
||||
const teams: Team[] = await teamService.getActiveOrInvitedTeamsbyUser(
|
||||
currUser.uid,
|
||||
returnedUser.emailAddress
|
||||
);
|
||||
|
||||
setTeams(teams);
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
if (loading || !user) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
// not in a team yet, and have not created a team yet
|
||||
return (
|
||||
<div className="container mx-auto flex flex-col max-w-screen-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5">
|
||||
{/* header */}
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<span className="flex flex-col justify-start">
|
||||
<div className="text-lg">👋Hey, {user.firstName}</div>
|
||||
<span className="text-gray-300 text-md">
|
||||
Let's get you started.
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Tooltip title={"Click to Edit Profile"}>
|
||||
<button onClick={() => router.push("/teams/profile")}>
|
||||
<img
|
||||
src={user ? user.avatarUrl : currUser.photoURL}
|
||||
alt="avatar"
|
||||
className="rounded-full w-12 shadow-lg"
|
||||
/>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row items-center">
|
||||
<span className="text-gray-400">Your Teams</span>
|
||||
<Tooltip title={"Add members and get started immediately!"}>
|
||||
<button
|
||||
onClick={() => window.open("/teams/create", "_self")}
|
||||
className="ml-auto rounded text-xs font-semibold bg-gray-200 p-2 text-teal-600 shadow-lg flex flex-row items-center space-x-2"
|
||||
>
|
||||
<FaPlus />
|
||||
<span>Create</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{/* all teams part of */}
|
||||
<div className="flex flex-row flex-wrap">
|
||||
{teams.map((team) => {
|
||||
console.log(team);
|
||||
return (
|
||||
<span
|
||||
key={team.id}
|
||||
className="group hover:bg-teal-600 hover:bg-opacity-10 transition-all
|
||||
p-5 rounded bg-gray-200 bg-opacity-20 flex flex-row justify-between items-center w-[20rem] m-2"
|
||||
>
|
||||
<span className="flex flex-col mr-10 items-start">
|
||||
<span className="flex flex-row items-center space-x-2">
|
||||
<span className="text-lg text-teal-600 group-hover:font-semibold transition-all">
|
||||
{team.name}
|
||||
</span>
|
||||
<Tooltip title={"Number of pro spots purchased"}>
|
||||
<span className="bg-teal-600 bg-opacity-50 text-xs rounded-full w-5 h-5 flex items-center justify-evenly text-white shrink-0">
|
||||
{team.allowedUserCount || 2}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
{team.companySite && (
|
||||
<span
|
||||
onClick={() => window.open(team.companySite, "_blank")}
|
||||
className="text-xs hover:cursor-pointer font-semibold text-gray-500"
|
||||
>
|
||||
{team.companySite}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<span className="text-xs text-gray-300">
|
||||
{"created: " + moment(team.createdDate.toDate()).fromNow()}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<Tooltip title={"Go to " + team.name}>
|
||||
<span
|
||||
onClick={() => window.open("/teams/" + team.id, "_blank")}
|
||||
className="ml-auto hover:cursor-pointer transition-all bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500"
|
||||
>
|
||||
<FaArrowRight className="text-sm text-white" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
|
||||
{teams.length == 0 ? (
|
||||
<button className="group flex flex-row py-5 px-3 items-center border border-dashed rounded">
|
||||
<FaBullhorn className="text-5xl text-orange-300" />
|
||||
|
||||
<span className="flex flex-col items-start ml-2 mr-10">
|
||||
<span className="text-gray-500">Remind Your Manager</span>
|
||||
<span className="text-gray-300 text-xs text-left">
|
||||
Your account email is {user.emailAddress}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="text-gray-300 ml-auto text-md mt-10">
|
||||
or learn more about{" "}
|
||||
<button
|
||||
onClick={() => window.open("/", "_self")}
|
||||
className="underline font-satisfy text-xl text-teal-500 decoration-teal-500"
|
||||
>
|
||||
nirvana
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context: GetServerSidePropsContext) {
|
||||
// const cookies = nookies.get(context);
|
||||
|
||||
// var user: User | null = null
|
||||
|
||||
// if (cookies.token) {
|
||||
// try {
|
||||
// const headers: HeadersInit = {
|
||||
// 'Content-Type': 'application/json',
|
||||
// Authorization: JSON.stringify({ token: cookies.token })
|
||||
// };
|
||||
// const result = await unfetch('/api/auth/validateToken', { headers });
|
||||
// console.log(result)
|
||||
|
||||
// // get user data
|
||||
// const userService: UserService = new UserService()
|
||||
|
||||
// // the user is authenticated!
|
||||
|
||||
// // FETCH STUFF HERE!! 🚀
|
||||
|
||||
// // user = await userService.getUser("asdf")
|
||||
// } catch (e) {
|
||||
// // let exceptions fail silently
|
||||
// // could be invalid token, just let client-side deal with that
|
||||
|
||||
// console.log(e)
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Pass data to the page via props
|
||||
// return { props: {
|
||||
// user
|
||||
// }
|
||||
// }
|
||||
|
||||
return { props: {} };
|
||||
}
|
||||
|
||||
export default RouteHandler;
|
||||
@@ -0,0 +1,80 @@
|
||||
import Head from 'next/head';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Landing() {
|
||||
return (
|
||||
<div className='container m-20'>
|
||||
<Head>
|
||||
<meta charSet="UTF-8" />
|
||||
|
||||
<title>nirvana for teams</title>
|
||||
|
||||
<link rel="icon" href="/icon.png" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin="true"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<main className="space-y-10">
|
||||
<p id="main-title">nirvana</p>
|
||||
|
||||
<p>🍃voice first collaboration for remote teams</p>
|
||||
|
||||
<p>
|
||||
tired of spending most of the work day on{' '}
|
||||
<font className="text-gray-300 text-3xl">slack, <font className="text-2xl">zoom,</font> <font className="text-xl">ms teams,</font> <font className="text-lg">trello,</font> <font className="text-base">outlook,</font> <font className="text-base">gcal, </font><font className="text-sm">notion,</font> <font className="text-xs">gmail...</font>?</font>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
focus on actually working and:
|
||||
<br />
|
||||
- cut the texting, emojis, and notifications
|
||||
<br />
|
||||
- increase collaboration without endless threads
|
||||
<br />
|
||||
- avoid 80% of meetings with asynchronous and spontaneous convos
|
||||
<br />
|
||||
- form better relationships with your team
|
||||
<br />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
wanna test the beta? text us @ <font className="text-gray-300">949.237.2715</font>
|
||||
</p>
|
||||
|
||||
{/* <marquee
|
||||
direction="left"
|
||||
width="100%"
|
||||
height="100%"
|
||||
behavior="scroll"
|
||||
scrollamount="12"
|
||||
offset="0%"
|
||||
>
|
||||
<p id="marquee-text">waitlist currently sitting at 2,324 people...</p>
|
||||
</marquee> */}
|
||||
|
||||
<p id="side-note">
|
||||
why? we live in a distracted world. let's fix it, because less is more.
|
||||
</p>
|
||||
|
||||
<Link exact href='/teams/login' className='text-3xl text-white'>
|
||||
<button className='mt-10 text-sm text-emerald-500 font-semibold py-1 px-4 bg-gray-200 rounded'>👋 Login</button>
|
||||
</Link>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
import { FaArrowLeft } from "react-icons/fa";
|
||||
import { FcGoogle } from "react-icons/fc";
|
||||
import MainLogo from "../../components/MainLogo";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
|
||||
export default function Login() {
|
||||
const { currUser, signInGoogle } = useAuth();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// if auth, go to dashboard
|
||||
if (currUser) {
|
||||
console.log("already logged in, redirecting to router");
|
||||
router.push("/teams");
|
||||
}
|
||||
}, [currUser]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="h-screen w-screen flex flex-row">
|
||||
{/* signin modal */}
|
||||
<div className="flex-1 bg-white bg-opacity-80 p-10 rounded-lg shadow-lg flex flex-col items-start justify-start">
|
||||
{/* header */}
|
||||
<div className="text-lg flex flex-row items-center space-x-2">
|
||||
<FaArrowLeft
|
||||
className="hover:cursor-pointer"
|
||||
onClick={() => window.open("/", "_self")}
|
||||
/>{" "}
|
||||
</div>
|
||||
|
||||
<div className="mx-auto my-auto flex flex-col items-center">
|
||||
<button
|
||||
onClick={signInGoogle}
|
||||
className=" text-md text-sky-500 py-2 px-5 border border-gray-200 transition-all hover:bg-gray-200 rounded flex flex-row items-center space-x-2"
|
||||
>
|
||||
<FcGoogle className="text-lg" />
|
||||
<span>Continue with Google</span>
|
||||
</button>
|
||||
<span className="text-xs text-center mt-2 text-gray-300">
|
||||
By continuing, you are agreeing <br></br>
|
||||
to the{" "}
|
||||
<a href="https://docs.google.com/document/d/1NRWN-6kDyOcADaUAQ-YWVHnz6i9ccGJ3/edit?usp=sharing&ouid=113470786690353109086&rtpof=true&sd=true">
|
||||
terms and conditions
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a href="https://docs.google.com/document/d/1S3JsGqXgkriAsBOybXpVR0JJ4hiRkaNt/edit?usp=sharing&ouid=113470786690353109086&rtpof=true&sd=true">
|
||||
privacy policy.
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span className="mx-auto flex items-center space-x-1">
|
||||
<span>©</span>
|
||||
<MainLogo className=" text-2xl" />
|
||||
</span>
|
||||
</div>
|
||||
{/* nice image on right side */}
|
||||
<div
|
||||
className="hidden md:block landing-page-bg bg-cover bg-no-repeat bg-center flex-1"
|
||||
style={
|
||||
{
|
||||
// background: "url('/wallpapers/superhuman.jpg')",
|
||||
}
|
||||
}
|
||||
></div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
import { Divider } from "antd";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
import { User } from "../../models/user";
|
||||
import UserService from "../../services/userService";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Profile() {
|
||||
const { currUser, logOut } = useAuth();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const router = useRouter();
|
||||
const userService: UserService = new UserService();
|
||||
|
||||
useEffect(() => {
|
||||
(async function () {
|
||||
try {
|
||||
// if not authenticated, take user to the login
|
||||
if (!currUser) {
|
||||
console.log(
|
||||
"not authenticated...routing from dashboard to teams home"
|
||||
);
|
||||
// router.push('/teams/login')
|
||||
}
|
||||
|
||||
// get user
|
||||
const returnedUser: User | null = await userService.getUser(
|
||||
currUser.uid
|
||||
);
|
||||
|
||||
// if the user is null, then go ahead and create the user even though it's not there yet
|
||||
if (!returnedUser) {
|
||||
userService.createUser(
|
||||
currUser.uid,
|
||||
currUser.email,
|
||||
currUser.photoURL
|
||||
);
|
||||
}
|
||||
|
||||
console.log("got user from the backend");
|
||||
|
||||
setUser(returnedUser);
|
||||
setNickname(returnedUser.nickName ?? "");
|
||||
setFirstName(
|
||||
returnedUser.firstName ?? currUser.displayName.split(" ")[0]
|
||||
);
|
||||
setLastName(returnedUser.lastName ?? "");
|
||||
setTeamRole(returnedUser.teamRole ?? "");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
router.push("/teams/login");
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
setLoading(true);
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if (!firstName) {
|
||||
setError("Must input first name");
|
||||
return;
|
||||
} else if (!lastName) {
|
||||
setError("Must input last name");
|
||||
return;
|
||||
} else if (!nickname) {
|
||||
setError("Must input nickname");
|
||||
return;
|
||||
} else if (nickname.length > 22) {
|
||||
setError("nickname must be less than 22 characters");
|
||||
return;
|
||||
} else if (!teamRole) {
|
||||
setError("Must input team role!");
|
||||
return;
|
||||
}
|
||||
|
||||
// create the user in the backend or just merge results
|
||||
let newUser = new User();
|
||||
newUser.id = currUser.uid;
|
||||
newUser.firstName = firstName;
|
||||
newUser.lastName = lastName;
|
||||
newUser.nickName = nickname;
|
||||
newUser.avatarUrl = currUser.photoURL;
|
||||
newUser.teamRole = teamRole;
|
||||
|
||||
try {
|
||||
await userService.updateUser(newUser);
|
||||
router.push("/teams");
|
||||
} catch (error) {
|
||||
setError(
|
||||
"Something went wrong in saving your information. Please try again."
|
||||
);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
const [firstName, setFirstName] = useState<string>(
|
||||
currUser.displayName.split(" ")[0]
|
||||
);
|
||||
const [lastName, setLastName] = useState<string>("");
|
||||
const [nickname, setNickname] = useState<string>("");
|
||||
const [teamRole, setTeamRole] = useState<string>("");
|
||||
const [error, setError] = useState<string>("");
|
||||
|
||||
return (
|
||||
<form
|
||||
className="container mx-auto max-w-screen-sm flex flex-col m-10 bg-white p-10 rounded-lg shadow-md space-y-5"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* header */}
|
||||
<div className="text-lg">Profile</div>
|
||||
|
||||
{error && <span className="text-red-300 text-md">{error}</span>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Avatar*</span>
|
||||
<span className="text-gray-300 text-xs">
|
||||
Please change your google image to change this.
|
||||
</span>
|
||||
<img
|
||||
src={user ? user.avatarUrl : currUser.photoURL}
|
||||
alt="asdf"
|
||||
className="rounded-lg mt-2"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Email*</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
This is set from your Google account and cannot be changed.
|
||||
</span>
|
||||
<input
|
||||
disabled
|
||||
className="w-full rounded-lg bg-gray-100 p-3"
|
||||
value={user ? user.emailAddress : currUser.email}
|
||||
readOnly
|
||||
/>
|
||||
</span>
|
||||
|
||||
<div className="flex flex-row justify-between space-x-3">
|
||||
<span className="flex flex-col items-start flex-1">
|
||||
<span className="text-md">First Name*</span>
|
||||
<span className="text-gray-300 text-xs mb-2"></span>
|
||||
<input
|
||||
placeholder="ex. John"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start flex-1">
|
||||
<span className="text-md">Last Name*</span>
|
||||
<span className="text-gray-300 text-xs mb-2"></span>
|
||||
<input
|
||||
placeholder="ex. Brown"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Nickname*</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
What does your team call you? This is what is displayed.
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. nicky"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={nickname}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span className="flex flex-col items-start">
|
||||
<span className="text-md">Role*</span>
|
||||
<span className="text-gray-300 text-xs mb-2">
|
||||
Are you a developer? designer? manager?
|
||||
</span>
|
||||
<input
|
||||
placeholder="ex. designer"
|
||||
className="w-full rounded-lg bg-gray-50 p-3"
|
||||
value={teamRole}
|
||||
onChange={(e) => setTeamRole(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Divider />
|
||||
|
||||
<span className="flex flex-row justify-end space-x-2">
|
||||
{/* if they already had a nickname, they are probably revisiting this page */}
|
||||
{/* can't cancel if they are a new user */}
|
||||
{loading ? (
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 mr-3 border rounded-full"
|
||||
viewBox="0 0 24 24"
|
||||
></svg>
|
||||
) : (
|
||||
<>
|
||||
{user && user.nickName ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => router.push("/teams")}
|
||||
className="bg-gray-100 py-2 px-5 rounded text-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* if they already had a nickname, they are probably revisiting this page */}
|
||||
<button
|
||||
type="submit"
|
||||
className="text-sm text-white font-semibold py-2 px-5 bg-teal-500 rounded"
|
||||
>
|
||||
{"Continue ->"}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user