-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39 from nnivxix/fix/home-page
Fix/home page
- Loading branch information
Showing
9 changed files
with
147 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -143,6 +143,7 @@ | |
| "BackdropCard": true, | ||
| "Genres": true, | ||
| "useHead": true, | ||
| "Footer": true | ||
| "Footer": true, | ||
| "Discover": true | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,23 @@ | ||
| export default function Footer() { | ||
| return ( | ||
| <footer className="bg-gray-900 text-white py-8 px-4 border-t-4 border-blue-600 w-full mt-9"> | ||
| <div className="w-full px-4 grid grid-cols-1 lg:grid-cols-2"> | ||
| <div className="col-spans-1"> | ||
| <h1 className="text-2xl font-bold mb-4">Vilm</h1> | ||
| <p className="text-gray-400 mb-1 "> | ||
| The Vilm website is a movie discovery platform featuring a modern | ||
| design. Users can browse various movie titles and access detailed | ||
| information, including the synopsis and trailers. | ||
| </p> | ||
| <div className="flex items-center mb-4"> | ||
| <h3 className="text-gray-400">Data provided by </h3> | ||
| <Link to="https://www.themoviedb.org" target="_blank"> | ||
| <img src="tmdb.png" alt="" width={"80px"} className="ml-2" /> | ||
| </Link> | ||
| </div> | ||
| <p className="text-gray-400">© 2024</p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| } | ||
| export default function Footer() { | ||
| return ( | ||
| <footer className="bg-gray-900 text-white border-t-4 border-blue-600 mt-9"> | ||
| <div className=" max-w-6xl mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-2"> | ||
| <div className="col-spans-1"> | ||
| <h1 className="text-2xl font-bold mb-4 italic">Vilm</h1> | ||
| <p className="text-gray-400 mb-1 "> | ||
| The Vilm website is a movie discovery platform featuring a modern | ||
| design. Users can browse various movie titles and access detailed | ||
| information, including the synopsis and trailers. | ||
| </p> | ||
| <div className="flex items-center mb-4"> | ||
| <h3 className="text-gray-400">Data provided by </h3> | ||
| <Link to="https://www.themoviedb.org" target="_blank"> | ||
| <img src="tmdb.png" alt="" width={"80px"} className="ml-2" /> | ||
| </Link> | ||
| </div> | ||
| <p className="text-gray-400">© 2024</p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,47 @@ | ||
| import { LibraryBig, Settings } from "lucide-react"; | ||
| import type { FormEvent } from "react"; | ||
|
|
||
| export default function Navbar() { | ||
| const [searchParams] = useSearchParams(); | ||
| const querySearch = searchParams.get("title"); | ||
| const [search, setSearch] = useState<string>(querySearch ?? ""); | ||
| const navigate = useNavigate(); | ||
| const { account } = useAccount(); | ||
|
|
||
| const handleSearch = (e: FormEvent) => { | ||
| e.preventDefault(); | ||
| if (!search.length) { | ||
| return; | ||
| } | ||
| navigate({ | ||
| pathname: "/search", | ||
| search: `?title=${search}&type=movie`, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="bg-gray-900"> | ||
| <nav className="flex max-w-6xl mx-auto h-16 items-center justify-between px-3 bg-gray-900 text-white"> | ||
| <Link to="/" className="logo"> | ||
| <h1 className="text-2xl md:text-4xl font-bold">Vilm</h1> | ||
| </Link> | ||
| <div className="flex gap-3 items-center"> | ||
| <form onSubmit={handleSearch}> | ||
| <Input | ||
| type="search" | ||
| value={search} | ||
| onChange={(e) => setSearch(e.target.value)} | ||
| className="rounded-md p-2 md:w-96 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:border-transparent" | ||
| aria-label="Search" | ||
| placeholder="Search movies and tvs" | ||
| style={{ backgroundColor: "#c4c4c430" }} | ||
| /> | ||
| </form> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger> | ||
| <Avatar> | ||
| <AvatarImage | ||
| src={gravatarUrl(account?.avatar?.gravatar.hash ?? "guest")} | ||
| /> | ||
| <AvatarFallback> | ||
| {account?.username ? account?.username[0] : "G"} | ||
| </AvatarFallback> | ||
| </Avatar> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end"> | ||
| <DropdownMenuLabel> | ||
| Hello {account?.username ?? "Guest"} | ||
| </DropdownMenuLabel> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem className="font-normal" asChild> | ||
| <Link to="/setting" title="Go to profile setting page"> | ||
| <Settings /> | ||
| <span className="ml-3">Settings</span> | ||
| </Link> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem className="font-normal" asChild> | ||
| <Link to="/watchlist/movie" title="Go to watchlist page"> | ||
| <LibraryBig /> | ||
| <span className="ml-3">My Watchlist</span> | ||
| </Link> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| ); | ||
| } | ||
| import { LibraryBig, Settings } from "lucide-react"; | ||
|
|
||
| export default function Navbar() { | ||
| const { account } = useAccount(); | ||
|
|
||
| return ( | ||
| <div className="bg-gray-900"> | ||
| <nav className="flex max-w-6xl mx-auto h-16 items-center justify-between px-3 bg-gray-900 text-white"> | ||
| <Link to="/" className="logo"> | ||
| <h1 className="text-2xl md:text-4xl italic font-bold">Vilm</h1> | ||
| </Link> | ||
| <div className="flex gap-3 items-center"> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger> | ||
| <Avatar> | ||
| <AvatarImage | ||
| src={gravatarUrl(account?.avatar?.gravatar.hash ?? "guest")} | ||
| /> | ||
| <AvatarFallback> | ||
| {account?.username ? account?.username[0] : "G"} | ||
| </AvatarFallback> | ||
| </Avatar> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent align="end"> | ||
| <DropdownMenuLabel> | ||
| Hello {account?.username ?? "Guest"} | ||
| </DropdownMenuLabel> | ||
| <DropdownMenuSeparator /> | ||
| <DropdownMenuItem className="font-normal" asChild> | ||
| <Link to="/setting" title="Go to profile setting page"> | ||
| <Settings /> | ||
| <span className="ml-3">Settings</span> | ||
| </Link> | ||
| </DropdownMenuItem> | ||
| <DropdownMenuItem className="font-normal" asChild> | ||
| <Link to="/watchlist/movie" title="Go to watchlist page"> | ||
| <LibraryBig /> | ||
| <span className="ml-3">My Watchlist</span> | ||
| </Link> | ||
| </DropdownMenuItem> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import type { Response, MovieTv } from "../types/response"; | ||
|
|
||
| export default function Discover() { | ||
| const { data: movies, isLoading } = useFetch<Response<MovieTv[]>>("/trending/all/day"); | ||
|
|
||
| if (isLoading) { | ||
| return "Loading..." | ||
| } | ||
| return ( | ||
| <div> | ||
| <div className="grid lg:grid-cols-8 md:grid-cols-4 grid-cols-2 gap-5 mx-auto px-5 mt-5"> | ||
| {movies?.results.map((movie: MovieTv) => ( | ||
| <CardItem movie={movie} key={movie.id} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,55 @@ | ||
| import type { Response, MovieTv } from "../types/response"; | ||
|
|
||
| export default function Home() { | ||
| useHead({ | ||
| title: 'Vilm', | ||
| meta: { | ||
| description: 'Best Reference Movies' | ||
| } | ||
| }); | ||
| const { data: movies } = useFetch<Response<MovieTv[]>>("/trending/all/day"); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className="grid lg:grid-cols-8 md:grid-cols-4 grid-cols-2 gap-5 mx-auto px-5 mt-5"> | ||
| {movies?.results.map((movie: MovieTv) => ( | ||
| <CardItem movie={movie} key={movie.id} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| import type { FormEvent } from "react"; | ||
| import { buttonVariants } from "@/components/ui/button"; | ||
| import { cn } from "@/lib/utils" | ||
|
|
||
| export default function Home() { | ||
| useHead({ | ||
| title: 'Vilm', | ||
| meta: { | ||
| description: 'Best Reference Movies' | ||
| } | ||
| }); | ||
| const [searchParams] = useSearchParams(); | ||
| const querySearch = searchParams.get("title"); | ||
| const [search, setSearch] = useState<string>(querySearch ?? ""); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const handleSearch = (e: FormEvent) => { | ||
| e.preventDefault(); | ||
| if (!search.length) { | ||
| return; | ||
| } | ||
| navigate({ | ||
| pathname: "/search", | ||
| search: `?title=${search}&type=movie`, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="lg:bg-[url('/home-banner.jpg')] bg-[url('/home-banner-vertical.jpg')] bg-center bg-cover" data-bg-src="https://www.pexels.com/photo/three-friends-watching-at-a-movie-theater-while-eating-popcorn-8263318/"> | ||
| <div className="mx-auto max-w-4xl px-5 mt-5"> | ||
| <div className="flex w-full lg:h-[63vh] h-[45vh] md:h-[56vh] justify-center flex-col gap-3 items-center"> | ||
| <div className="text-center"> | ||
| <h1 className="text-3xl font-bold italic">Vilm</h1> | ||
| <h2 className="text-xl font-bold">Explore what you next watch?</h2> | ||
| </div> | ||
| <form onSubmit={handleSearch} className="lg:w-1/2 w-full"> | ||
| <Input | ||
| type="search" | ||
| value={search} | ||
| onChange={(e) => setSearch(e.target.value)} | ||
| className="rounded-md py-5 w-full focus:outline-none focus:ring-2 focus:ring-gray-700 focus:border-transparent" | ||
| aria-label="Search" | ||
| placeholder="Search movies and tvs" | ||
| style={{ backgroundColor: "#c4c4c430" }} | ||
| /> | ||
| </form> | ||
| <p> | ||
| Or | ||
| </p> | ||
| <Link to={'/discover'} className={`lg:w-1/2 w-full ${cn(buttonVariants({ variant: "default" }))}`}> Discover </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |