npease/ChatMaps
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Restructure App, Created Chat UI, Ready for Firebase Integration / Backend

Browse Source
This commit is contained in:
Nicholas Pease
2024-02-25 03:19:12 +00:00
parent eeb6b856e6
commit afd5dbaa9f
1 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-next/src/app/app/page.js
+67 -57
View File
@@ -1,54 +1,9 @@
"use client"
import { useState, useEffect } from 'react'
import {Map, Marker, ZoomControl} from "pigeon-maps"
function Header() {
return (
<div className="m-2 rounded-lg h-[60px] bg-white shadow-2xl">
<a href="/"><img src="/logos/logo_transparent_inverse.png" className="h-[60px]"/></a>
</div>
)
}
function Sidebar() {
var nearbyTab = false
return (
<div className="h-dvh">
<div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
<div className='p-2'>
<div className='p-1 rounded-lg grid grid-cols-3 bg-white'>
<div className='p-1 cursor-pointer rounded-lg bg-[#D3D3D3] hover:bg-white' onClick={() => {nearbyTab = true}}>Nearby</div>
<div className='p-1 cursor-pointer rounded-lg hover:bg-[#D3D3D3] bg-white'>My Rooms</div>
<div className='p-1 cursor-pointer rounded-lg hover:bg-[#D3D3D3] bg-white'>Create</div>
</div>
</div>
{nearbyTab && <div className='overflow-y-auto h-[90%]'>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General"/>
<ChatRoomSidebar roomName="Umaine General Last"/>
</div> }
</div>
</div>
)
}
import { Form, useForm } from "react-hook-form";
function ChatRoomSidebar({roomName}) {
return (
<div className='border-[black] border-1 shadow-lg p-2 m-2 rounded-lg grid grid-cols-3 cursor-pointer'>
<div className=''>
@@ -118,23 +73,78 @@ function Geo() {
}
function Home() {
function MainTabHome() {
return (
<div className="grid grid-cols-4 auto-cols-max overflow-hidden">
<div className="col-span-3 h-page">
<Header/>
<div className="h-[calc(100%-75px)]">
<WelcomeMessage/>
<div className='h-[calc(100%-110px)] m-5 rounded-lg'>
<Geo/>
</div>
</div>
<>
<WelcomeMessage />
<div className='h-[calc(100%-110px)] m-5 rounded-lg'>
<Geo />
</div>
</>
)
}
function ChatRoom({chatRoom}) {
var { register, control, setError, formState: { errors, isSubmitting, isSubmitted } } = useForm()
return (
<div className='m-1 h-[100%] rounded-lg'>
<div className='h-[90%] m-4'>
Chats Go Here
</div>
<div className='m-2 h-[10%] w-[100%] bg-white rounded-lg'>
<Form control={control} className='w-[100%]'>
<input type="text" className='w-[91%]'/>
<button className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Send</button>
</Form>
</div>
<Sidebar/>
</div>
)
}
function Home() {
var [tab, setTab] = useState("nearby")
var [mainTab, setMainTab] = useState("chat")
var [chatRoom, setChatRoom] = useState("NA")
return (
<div className="grid grid-cols-4 auto-cols-max overflow-hidden">
<div className="col-span-3 h-page">
<div className="m-2 rounded-lg h-[63px] bg-white shadow-2xl grid grid-cols-2 p-1">
<div className='h-[60px]'>
<a href="/"><img src="logos/logo_transparent_inverse.png" className='h-[60px]'/></a>
</div>
<div className='h-[60px] p-4'>
{mainTab == "chat" && <a onClick={() => {setMainTab("home")}} className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full mr-5">Close Chat</a>}
<a href="/api/signout" className="p-2 cursor-pointer bg-[#dee0e0] bg-cyan-500 text-white font-bold rounded-full">Sign Out</a>
</div>
</div>
<div className="mr-2 h-[calc(100%-110px)]">
{mainTab == "home" && <MainTabHome/>}
{mainTab == "chat" && <ChatRoom room={chatRoom}/>}
</div>
</div>
<div className="h-dvh">
<div className="bg-white shadow-2xl rounded-lg m-2 h-[98%]">
<div className='p-2'>
<div className='p-1 rounded-lg grid grid-cols-3 bg-white'>
<div className={tab == "nearby"? 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]': 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]'} onClick={() => {setTab("nearby")}}>Nearby</div>
<div className={tab == "rooms"? 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]': 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]'} onClick={() => {setTab("rooms")}}>My Rooms</div>
<div className={tab == "create"? 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0] bg-[#D3D3D3]': 'select-none p-1 cursor-pointer rounded-lg hover:bg-[#C0C0C0]'} onClick={() => {setTab("create")}}>Create</div>
</div>
</div>
{tab == "nearby" && <div className='overflow-y-auto h-[90%]'>
Nearby
</div> }
{tab == "rooms" && <div className='overflow-y-auto h-[90%]'>
My Rooms
</div>}
{tab == "create" && <div className='overflow-y-auto h-[90%]'>
Create Room
</div>}
</div>
</div>
</div>
)
}
export default Home;