11 | >
12 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/home/_components/network-activity.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useGetNetworkActivitiesSuspense } from '@/api/user-activities'
4 | import { useLanguage } from '@/context/language'
5 | import { useSession } from '@/context/session'
6 | import { UserActivity } from '../../[username]/_components/user-activity'
7 |
8 | export function NetworkActivity() {
9 | const { user } = useSession()
10 | const { dictionary } = useLanguage()
11 |
12 | if (!user) return null
13 |
14 | const { data } = useGetNetworkActivitiesSuspense({
15 | userId: user.id,
16 | pageSize: '15',
17 | })
18 |
19 | return (
20 |
21 |
22 |
{dictionary.network_activity}
23 |
24 |
25 |
26 | {data.userActivities.map(activity => (
27 |
28 | ))}
29 |
30 |
8 | {Array.from({ length: 10 }).map((_, index) => (
9 |
10 | ))}
11 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/lists/[id]/_components/list-items/list-items.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 |
5 | import { useGetListItemsByListIdSuspense } from '@/api/list-item'
6 | import { ListItemsGrid } from './list-items-grid'
7 |
8 | type ListItemsProps = {
9 | listId: string
10 | }
11 |
12 | export const ListItems = ({ listId }: ListItemsProps) => {
13 | const { language } = useLanguage()
14 | const { data } = useGetListItemsByListIdSuspense(listId, { language })
15 |
16 | return
17 | }
18 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/lists/[id]/_components/list-page-results.tsx:
--------------------------------------------------------------------------------
1 | import type { Dictionary } from '@/utils/dictionaries'
2 | import { Link } from 'next-view-transitions'
3 |
4 | export type ListPageEmptyResultsProps = { dictionary: Dictionary }
5 | export const ListPageEmptyResults = ({
6 | dictionary,
7 | }: ListPageEmptyResultsProps) => {
8 | return (
9 |
10 |
11 |
12 |
13 | {dictionary.list_page.list_not_found}
14 |
15 |
16 |
17 | {dictionary.list_page.see_your_lists_or_create_new}{' '}
18 |
19 | {dictionary.list_page.here}
20 |
21 |
22 |
23 |
24 |
14 |
15 |
16 |
17 |
18 |
19 | {dictionary.private_list.title}
20 |
21 |
22 |
23 | {dictionary.private_list.description}
24 |
25 |
26 |
27 |
33 |
34 |
34 |
35 |
36 | {user.avatarUrl && (
37 |
38 | )}
39 |
40 |
41 | {username?.at(0)}
42 |
43 |
44 |
45 |
46 |
{username}
47 |
48 | {user.subscriptionType === 'PRO' &&
}
49 |
56 |
57 |
58 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/lists/_components/latest-lists.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useGetLists } from '@/api/list'
4 | import { useLanguage } from '@/context/language'
5 | import { useMemo } from 'react'
6 | import { v4 } from 'uuid'
7 | import { PopularListCard, PopularListCardSkeleton } from './popular-list-card'
8 |
9 | const LIMIT = 5
10 |
11 | export const LatestLists = () => {
12 | const { dictionary } = useLanguage()
13 | const { data, isLoading } = useGetLists({
14 | limit: LIMIT,
15 | visibility: 'PUBLIC',
16 | hasBanner: true,
17 | })
18 |
19 | const content = useMemo(() => {
20 | if (isLoading)
21 | return (
22 |
23 | {Array.from({ length: LIMIT }).map(_ => (
24 |
25 | ))}
26 |
27 | )
28 |
29 | if (!data?.lists.length) {
30 | return (
31 |
32 | {dictionary.no_lists_found}
33 |
34 | )
35 | }
36 |
37 | return (
38 |
39 | {data.lists.map(list => (
40 |
41 | ))}
42 |
43 | )
44 | }, [data, isLoading, dictionary])
45 |
46 | return (
47 |
48 |
49 |
{dictionary.latest_lists}
50 |
51 |
52 | {content}
53 |
24 |
32 |
33 |
34 |
35 |
36 | {dictionary.movie_collection.part_of}
37 |
38 |
39 |
40 | {collection.name}
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
23 |
24 |
25 |
26 |
27 |
28 | {movie.belongs_to_collection && (
29 |
30 |
34 |
35 | )}
36 |
37 |
38 |
39 |
40 |
41 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/movies/[id]/_components/movie-genres.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 | import type { MovieDetails } from '@/services/tmdb'
5 | import { Badge } from '@plotwist/ui/components/ui/badge'
6 | import { Link } from 'next-view-transitions'
7 |
8 | type MovieGenresProps = { genres: MovieDetails['genres'] }
9 |
10 | export const MovieGenres = ({ genres }: MovieGenresProps) => {
11 | const { language } = useLanguage()
12 |
13 | const hasGenres = genres.length > 0
14 | if (!hasGenres) return null
15 |
16 | return (
17 | <>
18 | {genres.map(({ id, name }) => {
19 | return (
20 |
21 |
22 | {name}
23 |
24 |
25 | )
26 | })}
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/movies/[id]/_components/movie-related.tsx:
--------------------------------------------------------------------------------
1 | import { type MovieRelatedType, tmdb } from '@/services/tmdb'
2 | import { Link } from 'next-view-transitions'
3 |
4 | import { PosterCard } from '@/components/poster-card'
5 | import type { Language } from '@/types/languages'
6 | import { tmdbImage } from '@/utils/tmdb/image'
7 |
8 | type MovieRelatedProps = {
9 | movieId: number
10 | variant: MovieRelatedType
11 | language: Language
12 | }
13 |
14 | export const MovieRelated = async ({
15 | movieId,
16 | variant,
17 | language,
18 | }: MovieRelatedProps) => {
19 | const { results } = await tmdb.movies.related(movieId, variant, language)
20 |
21 | return (
22 |
23 | {results.map(movie => (
24 |
25 |
26 |
30 |
31 |
32 | ))}
33 |
39 |
40 |
41 | {dictionary.movie_pages.discover.title}
42 |
43 |
44 |
45 | {dictionary.movie_pages.discover.description}
46 |
47 |
48 |
49 |
50 |
40 |
41 | {dictionary.movie_pages.now_playing.title}
42 |
43 |
44 |
45 | {dictionary.movie_pages.now_playing.description}
46 |
47 |
40 |
41 | {dictionary.movie_pages.popular.title}
42 |
43 |
44 |
45 | {dictionary.movie_pages.popular.description}
46 |
47 |
40 |
41 | {dictionary.movie_pages.top_rated.title}
42 |
43 |
44 |
45 | {dictionary.movie_pages.top_rated.description}
46 |
47 |
40 |
41 | {dictionary.movie_pages.upcoming.title}
42 |
43 |
44 |
45 | {dictionary.movie_pages.upcoming.description}
46 |
47 |
28 |
29 | {content}
30 |
31 |
32 |
39 |
49 | {content}
50 |
51 |
52 |
53 |
54 |
55 |
56 | )
57 | }
58 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/people/[id]/_person_tabs.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 | import { Tabs, TabsList, TabsTrigger } from '@plotwist/ui/components/ui/tabs'
5 | import { Link } from 'next-view-transitions'
6 | import { usePathname } from 'next/navigation'
7 | import { useMemo } from 'react'
8 |
9 | type PersonTabsProps = {
10 | personId: string
11 | }
12 |
13 | export function PersonTabs({ personId }: PersonTabsProps) {
14 | const pathname = usePathname()
15 | const { language, dictionary } = useLanguage()
16 |
17 | const splittedPathname = pathname.split('/')
18 | const minSegments = 4
19 |
20 | const value = useMemo(() => {
21 | if (splittedPathname.length === minSegments) {
22 | return 'credits'
23 | }
24 |
25 | return splittedPathname[splittedPathname.length - 1]
26 | }, [splittedPathname])
27 |
28 | return (
29 |
30 |
31 |
32 |
33 | {dictionary.tabs.credits}
34 |
35 |
36 |
37 |
38 |
39 | {dictionary.biography}
40 |
41 |
42 |
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/people/[id]/page.tsx:
--------------------------------------------------------------------------------
1 | import { tmdb } from '@/services/tmdb'
2 | import type { PageProps } from '@/types/languages'
3 | import { CreditsPage } from './_credits-page'
4 |
5 | type Props = PageProps<{ id: string }>
6 |
7 | export default async function Page({ params }: Props) {
8 | const { id, lang } = await params
9 |
10 | const movieCredits = await tmdb.person.movieCredits(Number(id), lang)
11 | const tvCredits = await tmdb.person.tvCredits(Number(id), lang)
12 |
13 | const credits = [
14 | ...movieCredits.cast,
15 | ...movieCredits.crew,
16 | ...tvCredits.cast,
17 | ...tvCredits.crew,
18 | ]
19 | .sort((a, b) => b.vote_count - a.vote_count)
20 | .filter(({ poster_path }) => poster_path)
21 |
22 | const uniqueRoles = new Set()
23 |
24 | for (const credit of credits) {
25 | if ('job' in credit) {
26 | uniqueRoles.add(credit.job)
27 | }
28 |
29 | if ('character' in credit) {
30 | uniqueRoles.add('Actor')
31 | }
32 | }
33 |
34 | return
35 | }
36 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/pricing/page.tsx:
--------------------------------------------------------------------------------
1 | import { Pattern } from '@/components/pattern'
2 | import { Pricing } from '@/components/pricing'
3 | import type { PageProps } from '@/types/languages'
4 | import { getDictionary } from '@/utils/dictionaries'
5 | import type { Metadata } from 'next'
6 |
7 | export async function generateMetadata(props: PageProps): Promise {
8 | const params = await props.params
9 |
10 | const { lang } = params
11 |
12 | const {
13 | home_prices: { title, description },
14 | } = await getDictionary(lang)
15 |
16 | return {
17 | title,
18 | description,
19 | openGraph: {
20 | title,
21 | description,
22 | siteName: 'Plotwist',
23 | },
24 | twitter: {
25 | title,
26 | description,
27 | },
28 | }
29 | }
30 |
31 | const PricingPage = async () => {
32 | return (
33 | <>
34 |
35 |
36 |
39 |
40 | )
41 | }
42 |
43 | export default PricingPage
44 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/reset-password/_components/reset-password-form.schema.ts:
--------------------------------------------------------------------------------
1 | import type { Dictionary } from '@/utils/dictionaries'
2 | import { z } from 'zod'
3 |
4 | export const resetPasswordFormSchema = (dictionary: Dictionary) =>
5 | z.object({
6 | password: z
7 | .string()
8 | .min(1, dictionary.password_required)
9 | .min(8, dictionary.password_length),
10 | })
11 |
12 | export type ResetPasswordFormValues = z.infer<
13 | ReturnType
14 | >
15 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/sign-in/page.tsx:
--------------------------------------------------------------------------------
1 | import { signIn } from '@/actions/auth/sign-in'
2 | import { Pattern } from '@/components/pattern'
3 | import type { PageProps } from '@/types/languages'
4 | import { getDictionary } from '@/utils/dictionaries'
5 | import { Link } from 'next-view-transitions'
6 | import { SignInForm } from './_sign-in-form'
7 |
8 | export default async function SignInPage(props: PageProps) {
9 | const params = await props.params
10 |
11 | const { lang } = params
12 |
13 | const dictionary = await getDictionary(lang)
14 |
15 | return (
16 | <>
17 |
18 |
19 |
20 |
21 |
22 |
23 | {dictionary.access_plotwist}
24 |
25 |
26 |
27 |
28 |
29 |
33 | {dictionary.do_not_have_an_account} {dictionary.create_now}
34 |
35 |
36 |
37 |
38 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-genres.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 | import type { TvSerieDetails } from '@/services/tmdb'
5 | import { Badge } from '@plotwist/ui/components/ui/badge'
6 | import { Link } from 'next-view-transitions'
7 |
8 | type TvSerieGenresProps = { genres: TvSerieDetails['genres'] }
9 |
10 | export const TvSeriesGenres = ({ genres }: TvSerieGenresProps) => {
11 | const { language } = useLanguage()
12 |
13 | const hasGenres = genres.length > 0
14 | if (!hasGenres) return null
15 |
16 | return (
17 | <>
18 | {genres.map(({ id, name }) => {
19 | return (
20 |
21 |
22 | {name}
23 |
24 |
25 | )
26 | })}
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/src/app/[lang]/tv-series/[id]/_components/tv-serie-related.tsx:
--------------------------------------------------------------------------------
1 | import { PosterCard } from '@/components/poster-card'
2 | import { tmdb } from '@/services/tmdb'
3 | import type { Language } from '@/types/languages'
4 | import { tmdbImage } from '@/utils/tmdb/image'
5 | import { Link } from 'next-view-transitions'
6 |
7 | type TvSerieRelatedProps = {
8 | id: number
9 | variant: 'similar' | 'recommendations'
10 | language: Language
11 | }
12 |
13 | export const TvSerieRelated = async ({
14 | id,
15 | variant,
16 | language,
17 | }: TvSerieRelatedProps) => {
18 | const { results } = await tmdb.tv.related(id, variant, language)
19 |
20 | return (
21 |
22 | {results.map(tv => (
23 |
24 |
25 |
29 |
30 |
31 | ))}
32 |
44 |
45 |
{title}
46 |
{description}
47 |
48 |
45 |
46 |
{title}
47 |
{description}
48 |
49 |
50 |
51 |
44 |
45 |
{title}
46 |
{description}
47 |
48 |
44 |
45 |
{title}
46 |
{description}
47 |
48 |
44 |
45 |
{title}
46 |
{description}
47 |
48 |
23 |
24 | {children}
25 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/apps/web/src/components/animated-link/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './animated-link'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/animes-list/anime-list.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { usePathname, useRouter, useSearchParams } from 'next/navigation'
4 |
5 | import { useLanguage } from '@/context/language'
6 |
7 | import { Button } from '@plotwist/ui/components/ui/button'
8 | import { StreamingServicesBadge } from '../streaming-services-badge'
9 | import { AnimeListContent } from './anime-list-content'
10 |
11 | export type AnimeListType = 'tv' | 'movies'
12 |
13 | export const AnimeList = () => {
14 | const { dictionary } = useLanguage()
15 | const { replace } = useRouter()
16 | const pathname = usePathname()
17 | const searchParams = useSearchParams()
18 |
19 | const type = (searchParams.get('type') ?? 'tv') as AnimeListType
20 |
21 | const handleReplaceType = (type: AnimeListType) => {
22 | replace(`${pathname}?type=${type}`)
23 | }
24 |
25 | return (
26 |
27 |
28 |
29 |
37 |
38 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
25 | {Object.entries(collection_filters.options).map(([key, value]) => {
26 | const mediaType = key as 'TV_SHOW' | 'MOVIE'
27 | const isSelected = selectedMediaTypes.includes(mediaType)
28 |
29 | return (
30 | {
35 | const newValue = isSelected
36 | ? selectedMediaTypes.filter(type => type !== mediaType)
37 | : [...selectedMediaTypes, mediaType]
38 | setValue('mediaType', newValue)
39 | }}
40 | >
41 | {value}
42 |
43 | )
44 | })}
45 |
46 |
47 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/apps/web/src/components/collection-filters/tabs/filters/(fields)/only_items_without_review.tsx:
--------------------------------------------------------------------------------
1 | import type { CollectionFiltersFormValues } from '@/components/collection-filters/collection-filters-schema'
2 | import { useLanguage } from '@/context/language'
3 | import { Checkbox } from '@plotwist/ui/components/ui/checkbox'
4 | import {
5 | FormControl,
6 | FormItem,
7 | FormLabel,
8 | } from '@plotwist/ui/components/ui/form'
9 | import { useFormContext } from 'react-hook-form'
10 |
11 | export const OnlyItemsWithoutReviewField = () => {
12 | const { setValue, watch } = useFormContext()
13 | const {
14 | dictionary: { collection_filters },
15 | } = useLanguage()
16 |
17 | return (
18 |
19 |
20 | {collection_filters.only_items_without_review_field_label}
21 |
22 |
23 |
24 |
25 |
28 | setValue('onlyItemsWithoutReview', value as boolean)
29 | }
30 | />
31 |
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/apps/web/src/components/collection-filters/tabs/filters/filters.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | MediaTypeField,
3 | OnlyItemsWithoutReviewField,
4 | RatingField,
5 | } from './(fields)'
6 |
7 | export const Filters = () => {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/src/components/collection-filters/tabs/filters/index.ts:
--------------------------------------------------------------------------------
1 | export * from './filters'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/collection-filters/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './filters'
2 | export * from './sort-by'
3 |
--------------------------------------------------------------------------------
/apps/web/src/components/collection-filters/tabs/sort-by/index.ts:
--------------------------------------------------------------------------------
1 | export * from './sort-by'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/command-search/command-search-group.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react'
2 |
3 | type CommandSearchGroupProps = {
4 | heading: string
5 | children: ReactNode
6 | }
7 |
8 | export const CommandSearchGroup = ({
9 | children,
10 | heading,
11 | }: CommandSearchGroupProps) => {
12 | return (
13 |
14 |
{heading}
15 |
16 |
{children}
17 |
19 | K
20 |
21 | )
22 | }
23 |
24 | return (
25 |
26 | CTRL + K
27 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/src/components/command-search/index.ts:
--------------------------------------------------------------------------------
1 | export * from './command-search'
2 | export * from './command-search-group'
3 | export * from './command-search-items'
4 |
--------------------------------------------------------------------------------
/apps/web/src/components/credits/credit-card.tsx:
--------------------------------------------------------------------------------
1 | import { tmdbImage } from '@/utils/tmdb/image'
2 | import { Link } from 'next-view-transitions'
3 | import Image from 'next/image'
4 |
5 | type CreditCardProps = {
6 | imagePath: string
7 | name: string
8 | role: string
9 | href: string
10 | }
11 |
12 | export const CreditCard = ({
13 | imagePath,
14 | name,
15 | role,
16 | href,
17 | }: CreditCardProps) => {
18 | return (
19 |
20 |
24 | {imagePath ? (
25 |
33 | ) : (
34 | {name[0]}
35 | )}
36 |
37 |
38 |
39 |
40 | {name}
41 |
42 |
43 |
44 | {role}
45 |
46 |
47 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/apps/web/src/components/credits/index.ts:
--------------------------------------------------------------------------------
1 | export * from './credit-card'
2 | export * from './credits'
3 |
--------------------------------------------------------------------------------
/apps/web/src/components/dorama-list/dorama-list.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { StreamingServicesBadge } from '../streaming-services-badge'
4 | import { DoramaListContent } from './dorama-list-content'
5 |
6 | export const DoramaList = () => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/apps/web/src/components/dorama-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dorama-list'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/follow-button/index.ts:
--------------------------------------------------------------------------------
1 | export * from './follow-button'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/followers/followers.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 | import { Separator } from '@plotwist/ui/components/ui/separator'
5 | import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
6 |
7 | export const Followers = () => {
8 | const { dictionary } = useLanguage()
9 | const isLoading = false
10 |
11 | return (
12 |
13 |
14 | {isLoading ? (
15 |
16 | ) : (
17 |
{0}
18 | )}
19 |
20 |
{dictionary.followers}
21 |
22 |
23 |
24 |
25 |
26 | {isLoading ? (
27 |
28 | ) : (
29 |
{0}
30 | )}
31 |
32 |
{dictionary.following}
33 |
34 |
27 |
31 |
{user.username}
32 |
33 |
34 | {user.avatarUrl && (
35 |
36 | )}
37 |
38 | {user.username?.at(0)}
39 |
40 |
41 |
42 |
51 |
19 |
23 |
24 | )
25 | }
26 |
27 | const Summary = (props: PropsWithChildren) => {
28 | return
29 | }
30 |
31 | const Title = (props: PropsWithChildren) => {
32 | return
33 | }
34 |
35 | const Overview = (props: PropsWithChildren) => {
36 | return (
37 |
38 | )
39 | }
40 |
41 | export const ItemHoverCard = {
42 | Banner,
43 | Information,
44 | Poster,
45 | Summary,
46 | Title,
47 | Overview,
48 | }
49 |
--------------------------------------------------------------------------------
/apps/web/src/components/item-review/index.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useGetReviewSuspense } from '@/api/reviews'
4 | import { useLanguage } from '@/context/language'
5 | import { useSession } from '@/context/session'
6 | import { cn } from '@/lib/utils'
7 | import { Button } from '@plotwist/ui/components/ui/button'
8 | import { Star } from 'lucide-react'
9 | import { useParams, usePathname } from 'next/navigation'
10 | import { Suspense } from 'react'
11 | import { ReviewFormDialog } from '../reviews/review-form-dialog'
12 |
13 | function ItemReviewContent() {
14 | const pathname = usePathname()
15 | const { id, seasonNumber, episodeNumber } = useParams<{
16 | id: string
17 | seasonNumber?: string
18 | episodeNumber?: string
19 | }>()
20 |
21 | const mediaType = pathname.includes('tv-series') ? 'TV_SHOW' : 'MOVIE'
22 | const tmdbId = Number(id)
23 |
24 | const { data } = useGetReviewSuspense({
25 | mediaType,
26 | tmdbId: String(tmdbId),
27 | seasonNumber,
28 | episodeNumber,
29 | })
30 |
31 | const { dictionary } = useLanguage()
32 |
33 | return (
34 |
40 |
47 |
48 | )
49 | }
50 |
51 | export function ItemReview() {
52 | const { user } = useSession()
53 | if (!user) return
54 |
55 | return (
56 |
57 |
58 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/apps/web/src/components/item-status/index.ts:
--------------------------------------------------------------------------------
1 | export * from './item-status'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/likes/index.ts:
--------------------------------------------------------------------------------
1 | export * from './likes'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/list-card/index.ts:
--------------------------------------------------------------------------------
1 | export * from './list-card'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/list-command/index.ts:
--------------------------------------------------------------------------------
1 | export * from './list-command'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/list-command/list-command-group.tsx:
--------------------------------------------------------------------------------
1 | import type { PropsWithChildren } from 'react'
2 |
3 | const Root = (props: PropsWithChildren) => (
4 |
5 | )
6 |
7 | const Label = (props: PropsWithChildren) => (
8 |
9 | )
10 |
11 | const Items = (props: PropsWithChildren) => (
12 |
13 | )
14 |
15 | export const ListCommandGroup = {
16 | Root,
17 | Label,
18 | Items,
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/src/components/list-command/list-command-item.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@plotwist/ui/components/ui/button'
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuTrigger,
6 | } from '@plotwist/ui/components/ui/dropdown-menu'
7 | import { MoreVertical } from 'lucide-react'
8 | import type { PropsWithChildren } from 'react'
9 |
10 | const Root = (props: PropsWithChildren) => {
11 | return (
12 |
16 | )
17 | }
18 |
19 | const Label = (props: PropsWithChildren) => {
20 | return
21 | }
22 |
23 | const Year = (props: PropsWithChildren) => {
24 | return (
25 |
29 | )
30 | }
31 |
32 | const Dropdown = ({ children }: PropsWithChildren) => {
33 | return (
34 |
35 |
36 |
39 |
40 |
41 | {children}
42 |
43 | )
44 | }
45 |
46 | export const ListCommandItem = {
47 | Root,
48 | Label,
49 | Year,
50 | Dropdown,
51 | }
52 |
--------------------------------------------------------------------------------
/apps/web/src/components/lists/index.ts:
--------------------------------------------------------------------------------
1 | export * from './lists-dropdown'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/logo/index.ts:
--------------------------------------------------------------------------------
1 | export * from './logo'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/logo/logo.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 | import { useSession } from '@/context/session'
5 | import { Link } from 'next-view-transitions'
6 | import Image from 'next/image'
7 |
8 | type LogoProps = { size?: number }
9 | export const Logo = ({ size = 24 }: LogoProps) => {
10 | const { language } = useLanguage()
11 |
12 | const { user } = useSession()
13 |
14 | return (
15 |
19 |
26 |
27 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/apps/web/src/components/movie-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from './movie-list'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/movie-list/movie-list.types.ts:
--------------------------------------------------------------------------------
1 | import type { MovieListType } from '@/services/tmdb'
2 |
3 | export type MovieListVariant = MovieListType | 'discover'
4 | export type MovieListProps = {
5 | variant: MovieListVariant
6 | }
7 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/index.ts:
--------------------------------------------------------------------------------
1 | export * from './movies-list-filters'
2 | export * from './movies-list-filters-schema'
3 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/movies-list-filters-schema.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 |
3 | export const moviesListFiltersSchema = z.object({
4 | release_date: z.object({
5 | gte: z.date().optional(),
6 | lte: z.date().optional(),
7 | }),
8 | genres: z.array(z.number()),
9 | with_original_language: z.string().optional(),
10 | sort_by: z.string().optional(),
11 |
12 | with_watch_providers: z.array(z.number()),
13 | watch_region: z.string().optional(),
14 |
15 | vote_average: z.object({
16 | gte: z.number().min(0).max(10),
17 | lte: z.number().min(0).max(10),
18 | }),
19 |
20 | vote_count: z.object({
21 | gte: z.number().min(0).max(500),
22 | }),
23 | })
24 |
25 | export type MoviesListFiltersFormValues = z.infer<
26 | typeof moviesListFiltersSchema
27 | >
28 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/tabs/filters/(fields)/index.ts:
--------------------------------------------------------------------------------
1 | export * from './genres'
2 | export * from './language'
3 | export * from './release-date'
4 | export * from './vote-average'
5 | export * from './vote-count'
6 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/tabs/filters/(fields)/vote-average.tsx:
--------------------------------------------------------------------------------
1 | import type { MoviesListFiltersFormValues } from '@/components/movies-list-filters'
2 | import { useLanguage } from '@/context/language'
3 | import {
4 | FormControl,
5 | FormItem,
6 | FormLabel,
7 | } from '@plotwist/ui/components/ui/form'
8 | import { Slider } from '@plotwist/ui/components/ui/slider'
9 | import { useFormContext } from 'react-hook-form'
10 | import { v4 } from 'uuid'
11 |
12 | export const VoteAverageField = () => {
13 | const {
14 | dictionary: {
15 | movies_list_filters: {
16 | vote_average_field: { label },
17 | },
18 | },
19 | } = useLanguage()
20 | const { setValue, watch } = useFormContext()
21 |
22 | return (
23 |
24 | {label}
25 |
26 |
27 |
28 |
{
35 | setValue('vote_average.gte', start)
36 | setValue('vote_average.lte', end)
37 | }}
38 | />
39 |
40 |
41 | {Array.from({ length: 11 }).map((_, index) => (
42 |
49 | ))}
50 |
29 |
{
36 | setValue('vote_count.gte', start)
37 | }}
38 | />
39 |
40 |
41 | {Array.from({ length: 11 }).map((_, index) => (
42 |
46 |
47 |
{index * 50}
48 |
49 | ))}
50 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/tabs/filters/index.ts:
--------------------------------------------------------------------------------
1 | export * from './filters'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './filters'
2 | export * from './sort-by'
3 |
--------------------------------------------------------------------------------
/apps/web/src/components/movies-list-filters/tabs/sort-by/index.ts:
--------------------------------------------------------------------------------
1 | export * from './sort-by'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/no-account-tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * from './no-account-tooltip'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/no-account-tooltip/no-account-tooltip.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import {
4 | Tooltip,
5 | TooltipContent,
6 | TooltipProvider,
7 | TooltipTrigger,
8 | } from '@plotwist/ui/components/ui/tooltip'
9 | import type { PropsWithChildren } from 'react'
10 |
11 | import { useLanguage } from '@/context/language'
12 | import { TooltipPortal } from '@radix-ui/react-tooltip'
13 | import { Link } from 'next-view-transitions'
14 |
15 | export const NoAccountTooltip = ({ children }: PropsWithChildren) => {
16 | const { dictionary, language } = useLanguage()
17 |
18 | return (
19 |
20 |
21 | {children}
22 |
23 |
24 |
25 |
26 | {dictionary.no_account_tooltip}
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/apps/web/src/components/pattern/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pattern'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/people-list/index.ts:
--------------------------------------------------------------------------------
1 | export * from './people-list'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/person-card/index.ts:
--------------------------------------------------------------------------------
1 | export * from './person-card'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/poster-card/index.ts:
--------------------------------------------------------------------------------
1 | export * from './poster-card'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/poster-card/poster-card.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
2 | import NextImage, { type ImageProps } from 'next/image'
3 | import { type ComponentProps, forwardRef } from 'react'
4 |
5 | const Root = forwardRef>((props, ref) => {
6 | return
7 | })
8 | Root.displayName = 'Root'
9 |
10 | const Image = (props: ImageProps) => {
11 | return (
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | const Details = (props: ComponentProps<'div'>) => {
19 | return
20 | }
21 |
22 | const Title = (props: ComponentProps<'h3'>) => {
23 | return
24 | }
25 |
26 | const Year = (props: ComponentProps<'span'>) => {
27 | return
28 | }
29 |
30 | const PosterCardSkeleton = forwardRef((_, ref) => (
31 |
32 |
33 |
34 | ))
35 | PosterCardSkeleton.displayName = 'Skeleton'
36 |
37 | export const PosterCard = {
38 | Root,
39 | Image,
40 | Details,
41 | Title,
42 | Year,
43 | Skeleton: PosterCardSkeleton,
44 | }
45 |
--------------------------------------------------------------------------------
/apps/web/src/components/poster/index.ts:
--------------------------------------------------------------------------------
1 | export * from './poster'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/poster/poster.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/lib/utils'
2 | import { tmdbImage } from '@/utils/tmdb/image'
3 | import { Image as LucideImage } from 'lucide-react'
4 | import Image from 'next/image'
5 | import type { ComponentProps } from 'react'
6 |
7 | type PosterProps = {
8 | url?: string | null
9 | alt: string
10 | } & ComponentProps<'div'>
11 |
12 | export const Poster = ({ url, alt, className, ...props }: PosterProps) => {
13 | return (
14 |
21 | {url ? (
22 |
30 | ) : (
31 |
32 | )}
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/apps/web/src/components/pricing/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pricing'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/pro-badge/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pro-badge'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/pro-badge/pro-badge.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useLanguage } from '@/context/language'
4 | import { cn } from '@/lib/utils'
5 | import { Link } from 'next-view-transitions'
6 |
7 | type ProBadgeProps = { className?: string; isLink?: boolean }
8 |
9 | export const ProBadge = ({ className, isLink }: ProBadgeProps) => {
10 | const { language } = useLanguage()
11 |
12 | if (isLink) {
13 | return (
14 |
21 | PRO
22 |
23 | )
24 | }
25 |
26 | return (
27 |
33 | PRO
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/apps/web/src/components/pro-feature-tooltip/index.ts:
--------------------------------------------------------------------------------
1 | export * from './pro-feature-tooltip'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/pro-feature-tooltip/pro-feature-tooltip.tsx:
--------------------------------------------------------------------------------
1 | import { useLanguage } from '@/context/language'
2 | import {
3 | Tooltip,
4 | TooltipContent,
5 | TooltipProvider,
6 | TooltipTrigger,
7 | } from '@plotwist/ui/components/ui/tooltip'
8 | import { Link } from 'next-view-transitions'
9 | import type { PropsWithChildren } from 'react'
10 |
11 | export function ProFeatureTooltip({ children }: PropsWithChildren) {
12 | const { language, dictionary } = useLanguage()
13 |
14 | return (
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 | {dictionary.feature_only_in_pro_plan}
23 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/apps/web/src/components/reviews/index.ts:
--------------------------------------------------------------------------------
1 | export * from './reviews'
2 |
--------------------------------------------------------------------------------
/apps/web/src/components/reviews/review-item/index.ts:
--------------------------------------------------------------------------------
1 | export * from './review-item'
2 | export * from './review-item-skeleton'
3 |
--------------------------------------------------------------------------------
/apps/web/src/components/reviews/review-item/review-item-skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { Rating } from '@plotwist/ui/components/ui/rating'
2 | import { Skeleton } from '@plotwist/ui/components/ui/skeleton'
3 |
4 | export const ReviewItemSkeleton = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
29 |
{
36 | setValue('vote_count.gte', start)
37 | }}
38 | />
39 |
40 |
41 | {Array.from({ length: 11 }).map((_, index) => (
42 |
46 |
47 |
{index * 50}
48 |
49 | ))}
50 |
12 |
13 |
14 |
15 |
16 |
17 |
21 | {title && {title}}
22 | {description && {description}}
23 |
24 | {action}
25 |
26 |
27 | ))}
28 |
29 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/packages/ui/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as TogglePrimitive from '@radix-ui/react-toggle'
4 | import { type VariantProps, cva } from 'class-variance-authority'
5 | import * as React from 'react'
6 |
7 | import { cn } from '@plotwist/ui/lib/utils'
8 |
9 | const toggleVariants = cva(
10 | 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
11 | {
12 | variants: {
13 | variant: {
14 | default: 'bg-transparent',
15 | outline:
16 | 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
17 | },
18 | size: {
19 | default: 'h-9 px-3',
20 | sm: 'h-8 px-2',
21 | lg: 'h-10 px-3',
22 | },
23 | },
24 | defaultVariants: {
25 | variant: 'default',
26 | size: 'default',
27 | },
28 | }
29 | )
30 |
31 | const Toggle = React.forwardRef<
32 | React.ElementRef,
33 | React.ComponentPropsWithoutRef &
34 | VariantProps
35 | >(({ className, variant, size, ...props }, ref) => (
36 |
41 | ))
42 |
43 | Toggle.displayName = TogglePrimitive.Root.displayName
44 |
45 | export { Toggle, toggleVariants }
46 |
--------------------------------------------------------------------------------
/packages/ui/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'
4 | import * as React from 'react'
5 |
6 | import { cn } from '@plotwist/ui/lib/utils'
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider
9 |
10 | const Tooltip = TooltipPrimitive.Root
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger
13 |
14 | const TooltipContent = React.forwardRef<
15 | React.ElementRef,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 |
27 | ))
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
29 |
30 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
31 |
--------------------------------------------------------------------------------
/packages/ui/src/hooks/use-media-query.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | export function useMediaQuery(query: string) {
4 | const [value, setValue] = React.useState(false)
5 |
6 | React.useEffect(() => {
7 | function onChange(event: MediaQueryListEvent) {
8 | setValue(event.matches)
9 | }
10 |
11 | const result = matchMedia(query)
12 | result.addEventListener('change', onChange)
13 | setValue(result.matches)
14 |
15 | return () => result.removeEventListener('change', onChange)
16 | }, [query])
17 |
18 | return value
19 | }
20 |
--------------------------------------------------------------------------------
/packages/ui/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@plotwist/typescript-config/react-library.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "paths": {
6 | "@plotwist/ui/*": ["./src/*"]
7 | }
8 | },
9 | "include": ["src"],
10 | "exclude": ["node_modules"]
11 | }
12 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "packages/*"
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@plotwist/typescript-config/base.json"
3 | }
4 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "tasks": {
4 | "build": {
5 | "dependsOn": ["^build"]
6 | },
7 | "web#build": {
8 | "dependsOn": ["^build"],
9 | "env": ["NEXT_PUBLIC_MEASUREMENT_ID"],
10 | "outputs": [".next/**", "!.next/cache/**"]
11 | },
12 | "lint": {
13 | "dependsOn": ["^lint"]
14 | },
15 | "dev": {
16 | "cache": false,
17 | "persistent": true
18 | },
19 | "test": {}
20 | },
21 | "globalEnv": [
22 | "NEXT_PUBLIC_TMDB_API_KEY",
23 | "NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY",
24 | "STRIPE_SECRET_KEY"
25 | ],
26 | "globalDependencies": ["tsconfig.json", ".env"]
27 | }
28 |
--------------------------------------------------------------------------------