-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: music and movie card design (#51)
* wip: add music playlist in mobile * chore: lint * feat: add all playlists * chore: lint * fix: wrong album cover * feat: extarct songlist and songitem component * chore: lint * feat: add movie card * chore: lint * fix: lockfile
- Loading branch information
1 parent
a726eed
commit 7d854dd
Showing
14 changed files
with
288 additions
and
59 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
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 |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import * as TabsPrimitive from "@radix-ui/react-tabs"; | ||
| import * as React from "react"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const Tabs = TabsPrimitive.Root; | ||
|
|
||
| const TabsList = React.forwardRef(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.List | ||
| ref={ref} | ||
| className={cn( | ||
| "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TabsList.displayName = TabsPrimitive.List.displayName; | ||
|
|
||
| const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; | ||
|
|
||
| const TabsContent = React.forwardRef(({ className, ...props }, ref) => ( | ||
| <TabsPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TabsContent.displayName = TabsPrimitive.Content.displayName; | ||
|
|
||
| export { Tabs, TabsList, TabsTrigger, TabsContent }; |
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
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,10 +1,24 @@ | ||
| import React from "react"; | ||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; | ||
| import { MovieCover, MovieList } from "./components/movie"; | ||
| import { SongCover, SongList } from "./components/music"; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div className="h-screen w-full prose flex flex-col justify-center items-center font-serif"> | ||
| <h1>Music List</h1> | ||
| <h1>Movie List</h1> | ||
| </div> | ||
| <Tabs defaultValue="Music" className="h-full w-96 mt-12"> | ||
| <TabsList className="grid w-full grid-cols-2 mb-4"> | ||
| <TabsTrigger value="Music">Music</TabsTrigger> | ||
| <TabsTrigger value="Movies">Movies</TabsTrigger> | ||
| </TabsList> | ||
|
|
||
| <TabsContent value="Music" className="flex flex-col h-full justify-center items-center"> | ||
| <SongCover /> | ||
| <SongList /> | ||
| </TabsContent> | ||
|
|
||
| <TabsContent value="Movies" className="flex flex-col h-full justify-center items-center"> | ||
| <MovieCover /> | ||
| <MovieList /> | ||
| </TabsContent> | ||
| </Tabs> | ||
| ); | ||
| } |
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,12 @@ | ||
| export default function MovieCover() { | ||
| return ( | ||
| <div className="flex flex-col justify-center items-center gap-2 mb-4"> | ||
| <div className="rounded-md w-72 h-72 drop-shadow-md border bg-gradient-to-br from-gray-100 via-pink-50 to-emerald-700 p-4"> | ||
| <span className="text-4xl font-semibold text-black/90">David Dong's MovieList</span> | ||
| </div> | ||
| <div className="text-2xl font-semibold text-black/90">David Dong's MovieList</div> | ||
| <h2 className="text-[#d60017] text-xl font-normal">David Dong</h2> | ||
| <div className="text-[13px] text-black/50">Thriller, Tragicomedy</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 |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { MOVIE_BASEURL, Movies } from "@/config/project"; | ||
|
|
||
| function MovieItem({ title, year, imageUrl }) { | ||
| return ( | ||
| <div className="flex group p-4 w-full hover:bg-zinc-100 hover:rounded-md"> | ||
| <div | ||
| style={{ backgroundImage: `url('${MOVIE_BASEURL}${imageUrl}.jpg')` }} | ||
| className="rounded-md border drop-shadow-md flex justify-center items-center bg-cover bg-center h-44 w-32" | ||
| ></div> | ||
| <div className="flex flex-col justify-start items-start ml-4 gap-2"> | ||
| <div className="text-black/80 font-normal">{title}</div> | ||
| <div className="text-black/50 font-normal text-sm">{year}</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function MovieList() { | ||
| return ( | ||
| <div className="flex w-full p-1 justify-center items-center flex-col"> | ||
| {Movies.map((movie) => ( | ||
| <MovieItem | ||
| key={movie.title} | ||
| title={movie.title} | ||
| year={movie.year} | ||
| imageUrl={movie.imageUrl} | ||
| /> | ||
| ))} | ||
| </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,3 @@ | ||
| import MovieCover from "./MovieCover"; | ||
| import MovieList from "./MovieList"; | ||
| export { MovieCover, MovieList }; |
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,12 @@ | ||
| export default function SongCover() { | ||
| return ( | ||
| <div className="flex flex-col justify-center items-center gap-2"> | ||
| <div className="rounded-md w-72 h-72 drop-shadow-md border bg-gradient-to-br from-gray-100 via-pink-50 to-sky-700 p-4"> | ||
| <span className="text-4xl font-semibold text-black/90">David Dong's Playlist</span> | ||
| </div> | ||
| <div className="text-2xl font-semibold text-black/90">David Dong's Playlist</div> | ||
| <h2 className="text-[#d60017] text-xl font-normal">David Dong</h2> | ||
| <div className="text-[13px] text-black/50">R&B Neo Soul Gospel</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 |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { MusicPlayIcon } from "@/components/ui/icons"; | ||
| import { SONG_BASEURL, Songs } from "@/config/project"; | ||
| function SongItem({ song }) { | ||
| return ( | ||
| <div className="group w-full flex hover:bg-zinc-100 hover:rounded-md p-2"> | ||
| <div | ||
| style={{ backgroundImage: `url(${SONG_BASEURL}${song.url}.jpg)` }} | ||
| className="relative w-10 h-10 rounded-md border flex justify-center items-center bg-cover bg-center" | ||
| > | ||
| <div className="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity rounded-md"></div> | ||
| <MusicPlayIcon | ||
| className="w-7 h-7 hidden group-hover:block z-10 cursor-pointer" | ||
| onClick={() => { | ||
| window.location.href = | ||
| "https://music.apple.com/tr/playlist/david-dongs-playlist/pl.u-leyl096uME0KMW6"; | ||
| }} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col justify-center ml-2"> | ||
| <div className="text-black/80 text-[13px] font-normal">{song.title}</div> | ||
| <div className="text-black/50 text-[13px] font-normal">{song.artist}</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default function SongList() { | ||
| return ( | ||
| <div className="flex flex-col w-full p-1 space-y-2"> | ||
| {Songs.map((song) => ( | ||
| <SongItem key={song.title} song={song} /> | ||
| ))} | ||
| </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,4 @@ | ||
| import SongCover from "./SongCover"; | ||
| import SongList from "./SongList"; | ||
|
|
||
| export { SongCover, SongList }; |