lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: improved UI by adding CSS files

Browse source
This commit is contained in:
Lukian 2025-04-06 17:47:51 +02:00
parent 1656e95557
commit 42e6acd9ca
19 changed files with 543 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

112
front/src/pages/Home.tsx
View file

@ -1,9 +1,12 @@
import { useState, useEffect } from "react"
import { Link } from "react-router-dom"
import { Channels, RecentChannels, User, Messages } from "../types"
import TopBar from "../components/TopBar"
import MessageComponent from "../components/MessageComponent"
import axios from "axios"
import "../styles/Home.css"
export default function Home() {
const [user, setUser] = useState<User>();
const [channels, setChannels] = useState<RecentChannels>();
@ -80,59 +83,66 @@ export default function Home() {
}, [search])
return (
<div>
<h1>Home</h1>
{user ? (
<div>
<p>Welcome {user.username}</p>
<button onClick={() => {
localStorage.removeItem("token")
window.location.reload()
}}>Logout</button>
<Link to="/create-channel">Create Channel</Link>
<div className="home">
<TopBar user={user} />
<div className="home-header">
<div className="home-header-text">
<h2>Welcome to Tanuki's forum !</h2>
<p>
I don't know what to say, but I hope you will enjoy your stay here.
</p>
</div>
) : (
<div>
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
<img src="osaka_arch.png" alt="osaka" className="osaka"/>
</div>
<div className="main-content">
<div className="home-messages">
<h2>Last messages</h2>
<div className="messages-list">
{messages?.map((message) => (
<MessageComponent
key={message.id}
message={message}
user={user}
channel={undefined}
deleteMessage={undefined}
/>
))}
</div>
</div>
)}
<h2>Recent active channels</h2>
<ul>
{channels?.map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>
))}
</ul>
<h2>Search channels</h2>
<input
type="text"
placeholder="Search channels"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<ul>
{searchedChannels?.map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>
))}
</ul>
<Link to={'/channels'}>All channels</Link>
<h2>Last messages</h2>
<ul>
{messages?.map((message) => (
<MessageComponent
key={message.id}
message={message}
user={user}
channel={undefined}
deleteMessage={undefined}
/>
))}
</ul>
<img src="osaka_arch.png" alt="osaka" className="osaka"/>
<div className="channels">
<h2>Channels</h2>
<Link to={'/channels'}>All channels</Link>
{user && (
<Link to={'/create-channel'}>Create channel</Link>
)}
<div className="channels-recent">
<h3>Recent active channels</h3>
<ul>
{channels?.map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>
))}
</ul>
</div>
<div className="channels-search">
<h3>Search channels</h3>
<input
type="text"
placeholder="Search channels"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<ul>
{searchedChannels?.map((channel) => (
<li key={channel.id}>
<Link to={`/c/${channel.name}`}>{channel.name}</Link>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
)
}