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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/BrowseLayout.tsx
View File

@ -13,7 +13,7 @@ function BrowseLayout() {
<main className="flex-1 flex flex-row overflow-hidden"> <main className="flex-1 flex flex-row overflow-hidden">
<div className="bg-neutral-800 w-60 flex flex-col"> <div className="bg-neutral-800 w-60 flex flex-col">
<div className="flex flex-row justify-between p-2 items-center"> <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"> <Button variant="subtle" className="p-2">
<ArrowLeftIcon className="w-4 h-4" /> <ArrowLeftIcon className="w-4 h-4" />
</Button> </Button>

25
client/src/components/NavBar.tsx
View File

@ -1,5 +1,6 @@
import { TvIcon } from "@heroicons/react/24/outline"; import { TvIcon, UserIcon } from "@heroicons/react/24/outline";
import { FC } from "react"; import { FC } from "react";
import Button from "./Button";
import Input from "./Input"; import Input from "./Input";
const NavBar: FC = () => { const NavBar: FC = () => {
@ -7,12 +8,13 @@ const NavBar: FC = () => {
<nav className="bg-zinc-800 w-screen font-semibold"> <nav className="bg-zinc-800 w-screen font-semibold">
<div className="flex flex-row justify-between items-center mx-2"> <div className="flex flex-row justify-between items-center mx-2">
<div className="basis-1/4"> <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> <li>
<TvIcon className="w-6 h-6" /> <TvIcon className="w-6 h-6" />
</li> </li>
<li>Following</li> <li>
<li>Browse</li> <p className="text-lg">Browse</p>
</li>
</ul> </ul>
</div> </div>
<div className="basis-2/4"> <div className="basis-2/4">
@ -22,9 +24,20 @@ const NavBar: FC = () => {
</div> </div>
<div className="basis-1/4"> <div className="basis-1/4">
<ul className="justify-end flex flex-row space-x-3 items-center"> <ul className="justify-end flex flex-row space-x-3 items-center">
<li>Hello</li>
<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> </li>
</ul> </ul>
</div> </div>