#First Commit

master
MickSlash 2023-06-26 16:50:04 +02:00
parent 7796d799eb
commit ca2049d363
7 changed files with 136 additions and 7 deletions

View File

@ -0,0 +1,10 @@
import React from 'react'
import { signOut } from 'next-auth/react'
const AccountMenu = () => {
return (
<div>AccountMenu</div>
)
}
export default AccountMenu

37
components/MobileMenu.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from 'react'
interface MobileMenuProps {
visible?: boolean;
}
const MobileMenu: React.FC<MobileMenuProps> = ({visible}) => {
if(!visible){
return null;
}
return (
<div className='bg-black w-56 absolute top-8 left-0 py-5 flex flex-col border-2 border-gray-800'>
<div className='flex flex-col gap-4'>
<div className='px-3 text-center text-white hover:underline'>
Home
</div>
<div className='px-3 text-center text-white hover:underline'>
Serie TV
</div>
<div className='px-3 text-center text-white hover:underline'>
Film
</div>
<div className='px-3 text-center text-white hover:underline'>
Nuovi e Popolari
</div>
<div className='px-3 text-center text-white hover:underline'>
La mia Lista
</div>
<div className='px-3 text-center text-white hover:underline'>
Sfoglia per lingua
</div>
</div>
</div>
)
}
export default MobileMenu

49
components/Navbar.tsx Normal file
View File

@ -0,0 +1,49 @@
import MobileMenu from "./MobileMenu"
import NavbarItem from "./NavbarItem"
import { BsChevronDown,BsSearch,BsBell } from "react-icons/bs"
import { useCallback,useState } from "react"
import AccountMenu from "./AccountMenu";
function Navbar() {
const [showMobileMenu,setShowMobileMenu] = useState(false);
const toggleMobileMenu = useCallback(()=>{
setShowMobileMenu((currentvisible) => !currentvisible)
},[])
return (
<nav className="w-full fixed z-40">
<div className="px-4 md:px-16 py-6 flex flex-row items-center transition duration-500 bg-zinc-900 bg-opacity-90">
<img className="h-10 lg:h-16" src="https://i.imgur.com/6awt6G7.png" alt="Logo" />
<div className="flex-row ml-8 gap-7 hidden lg:flex">
<NavbarItem label="Home"/>
<NavbarItem label="Serie TV"/>
<NavbarItem label="Film"/>
<NavbarItem label="Nuovi e Popolari"/>
<NavbarItem label="La mia Lista"/>
<NavbarItem label="Sfoglia per lingua"/>
</div>
<div onClick={toggleMobileMenu} className="lg:hidden flex flex-row items-center gap-2 ml-8 cursor-pointer relative">
<p className="text-white text-sm">Sfoglia</p>
<BsChevronDown className="text-white transition" />
<MobileMenu visible={showMobileMenu} />
</div>
<div className="flex flex-row ml-auto gap-7 items-center">
<div className="text-gray-200 hover:text-gray-300 cursor-pointer transition ">
<BsSearch />
</div>
<div className="text-gray-200 hover:text-gray-300 cursor-pointer transition ">
<BsBell />
</div>
<div className="flex flex-row items-center gap-2 cursor-pointer relative">
<div className="w-6 h-6 lg:w-10 lg:h-10 rounded-md overflow-hidden">
<img src="https://api.dicebear.com/6.x/fun-emoji/svg?seed=Michael" alt="Profilo" />
</div>
<BsChevronDown className="text-white transition" />
</div>
<AccountMenu />
</div>
</div>
</nav>
)
}
export default Navbar

14
components/NavbarItem.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
interface NavbarItemProps {
label: String;
}
const NavbarItem: React.FC<NavbarItemProps> = ({label}) => {
return (
<div className="text-white cursor-pointer hover:text-gray-300 transition">
{label}
</div>
)
}
export default NavbarItem

View File

@ -19,7 +19,6 @@ const Auth = () => {
await signIn('credentials', { await signIn('credentials', {
email, email,
password, password,
redirect: false,
callbackUrl: '/profiles' callbackUrl: '/profiles'
}); });
} catch (err) { } catch (err) {
@ -79,13 +78,13 @@ const Auth = () => {
{variant === 'login' ? 'Login' : 'Crea Account'} {variant === 'login' ? 'Login' : 'Crea Account'}
</button> </button>
<div onClick={() => signIn('google', { <div onClick={() => signIn('google', {
callbackUrl: '/' callbackUrl: '/profiles'
})} className="flex flex-row items-center gap-4 mt-8 justify-center"> })} className="flex flex-row items-center gap-4 mt-8 justify-center">
<div className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition"> <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
<FcGoogle size={30} /> <FcGoogle size={30} />
</div> </div>
<div onClick={() => signIn('github', { <div onClick={() => signIn('github', {
callbackUrl: '/' callbackUrl: '/profiles'
})} className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition"> })} className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
<FaGithub size={30} /> <FaGithub size={30} />
</div> </div>

View File

@ -1,3 +1,4 @@
import Navbar from "@/components/Navbar"
import useCurrentUser from "@/hooks/useCurrentUser" import useCurrentUser from "@/hooks/useCurrentUser"
import { NextPageContext } from "next" import { NextPageContext } from "next"
import { signOut,getSession } from "next-auth/react" import { signOut,getSession } from "next-auth/react"
@ -19,11 +20,9 @@ export async function getServerSideProps(context: NextPageContext){
export default function Home() { export default function Home() {
const { data: user } = useCurrentUser();
return ( return (
<> <>
<h1 className='text-2xl'>Netflix Clone</h1> <Navbar />
<button onClick={() => signOut()} className="h-10 w-full bg-white">Logout</button>
</> </>
) )
} }

View File

@ -1,5 +1,7 @@
import useCurrentUser from "@/hooks/useCurrentUser";
import { NextPageContext } from "next" import { NextPageContext } from "next"
import { getSession } from "next-auth/react" import { getSession } from "next-auth/react"
import { useRouter } from "next/router";
export async function getServerSideProps(context: NextPageContext){ export async function getServerSideProps(context: NextPageContext){
const session = await getSession(context); const session = await getSession(context);
@ -18,8 +20,27 @@ export async function getServerSideProps(context: NextPageContext){
function Profiles() { function Profiles() {
const router = useRouter();
const { data:user } = useCurrentUser();
return ( return (
<div className="text-white text-4xl">Profili</div> <div className="flex items-center h-full justify-center">
<div className="flex flex-col">
<h1 className="text-3xl md:text-6xl text-white text-center">Chi sta guardando? </h1>
<div className="flex items-center justify-center gap-8 mt-10">
<div onClick={() => router.push('/')}>
<div className="group flex-row w-44 mx-auto">
<div className="w-44 h-44 rounded-md flex items-center justify-center border-2 border-transparent group-hover:cursor-pointer group:hover:border-white overflow-hidden">
<img src="https://api.dicebear.com/6.x/fun-emoji/svg?seed=Michael" alt="Profilo" />
</div>
<div className="mt-4 text-gray-400 text-2xl text-center group-hover:text-white group-hover:cursor-pointer">
{user?.name}
</div>
</div>
</div>
</div>
</div>
{/* https://api.dicebear.com/6.x/fun-emoji/svg?seed= */}
</div>
) )
} }