niku/twitch-clone
niku/twitch-clone
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Default state of client view is logged out

Browse Source
This commit is contained in:
strNophix 2022-09-29 15:21:02 +02:00
parent 2433d0c225
commit 2bbe65ce3e
2 changed files with 20 additions and 7 deletions
client/src/components
BrowseLayout.tsxNavBar.tsx

2
client/src/components/BrowseLayout.tsx

@ -13,7 +13,7 @@ function BrowseLayout() {
<main className="flex-1 flex flex-row overflow-hidden">
<div className="bg-neutral-800 w-60 flex flex-col">
<div className="flex flex-row justify-between p-2 items-center">
<p className="uppercase font-semibold text-sm">Followed channels</p>
<p className="uppercase font-semibold text-sm">Trending channels</p>
<Button variant="subtle" className="p-2">
<ArrowLeftIcon className="w-4 h-4" />
</Button>

25
client/src/components/NavBar.tsx

@ -1,5 +1,6 @@
import { TvIcon } from "@heroicons/react/24/outline";
import { TvIcon, UserIcon } from "@heroicons/react/24/outline";
import { FC } from "react";
import Button from "./Button";
import Input from "./Input";
const NavBar: FC = () => {
@ -7,12 +8,13 @@ const NavBar: FC = () => {
<nav className="bg-zinc-800 w-screen font-semibold">
<div className="flex flex-row justify-between items-center mx-2">
<div className="basis-1/4">
<ul className="flex flex-row space-x-3 items-center">
<ul className="flex flex-row space-x-9 items-center">
<li>
<TvIcon className="w-6 h-6" />
</li>
<li>Following</li>
<li>Browse</li>
<li>
<p className="text-lg">Browse</p>
</li>
</ul>
</div>
<div className="basis-2/4">
@ -22,9 +24,20 @@ const NavBar: FC = () => {
</div>
<div className="basis-1/4">
<ul className="justify-end flex flex-row space-x-3 items-center">
<li>Hello</li>
<li>
<div className="w-8 h-8 rounded-full bg-yellow-300" />
<Button className="text-sm px-3 py-2 bg-neutral-700">
Log In
</Button>
</li>
<li>
<Button className="text-sm px-3 py-2 bg-violet-500">
Sign Up
</Button>
</li>
<li>
<Button variant="subtle" className="p-1">
<UserIcon className="h-5 w-5 inline-block" />
</Button>
</li>
</ul>
</div>