nandi.uk
This repository has no description
2.1 kB
63 lines
1'use client';
2
3import { detectUrlPlatform, SupportedPlatform } from '@/lib/utils/link';
4import { UrlCard } from '@semble/types';
5import SembleCollectionCardContent from './SembleCollectionCardContent';
6import LinkCardContent from './LinkCardContent';
7import BlueskyPost from '@/features/platforms/bluesky/components/blueskyPost/BlueskyPost';
8import { Suspense } from 'react';
9import { ErrorBoundary } from 'react-error-boundary';
10import BlueskyPostSkeleton from '@/features/platforms/bluesky/components/blueskyPost/Skeleton.BlueskyPost';
11import YoutubeVideo from '@/features/platforms/youtube/components/YoutubeVideo/YoutubeVideo';
12import SpotifyEmbed from '@/features/platforms/spotify/components/SpotifyEmbed/SpotifyEmbed';
13import { useUserSettings } from '@/features/settings/lib/queries/useUserSettings';
14
15interface Props {
16 url: string;
17 cardContent: UrlCard['cardContent'];
18}
19
20export default function UrlCardContent(props: Props) {
21 const platform = detectUrlPlatform(props.url);
22 const { settings } = useUserSettings();
23
24 if (platform.type === SupportedPlatform.SEMBLE_COLLECTION) {
25 return <SembleCollectionCardContent cardContent={props.cardContent} />;
26 }
27
28 if (
29 platform.type === SupportedPlatform.BLUESKY_POST ||
30 platform.type === SupportedPlatform.BLACKSKY_POST
31 ) {
32 return (
33 <ErrorBoundary
34 fallback={<LinkCardContent cardContent={props.cardContent} />}
35 >
36 <Suspense fallback={<BlueskyPostSkeleton />}>
37 <BlueskyPost
38 url={props.url}
39 fallbackCardContent={
40 <LinkCardContent cardContent={props.cardContent} />
41 }
42 />
43 </Suspense>
44 </ErrorBoundary>
45 );
46 }
47
48 if (
49 platform.type === SupportedPlatform.YOUTUBE_VIDEO &&
50 settings.cardView !== 'list'
51 ) {
52 return <YoutubeVideo url={platform.url} cardContent={props.cardContent} />;
53 }
54
55 if (
56 platform.type === SupportedPlatform.SPOTIFY &&
57 settings.cardView !== 'list'
58 ) {
59 return <SpotifyEmbed url={platform.url} cardContent={props.cardContent} />;
60 }
61
62 return <LinkCardContent cardContent={props.cardContent} />;
63}