moved video card to components and renamed to video

src/app/trending/Trending.tsx

@@ -7,13 +7,14 @@ import { useQuery } from "@tanstack/react-query";
 import { Button } from "@nextui-org/button";
 
 import { Spacer } from "@nextui-org/spacer";
-import { VideoCard } from "./VideoCard";
+
 import { LoadingPage } from "@/components/LoadingPage";
 import { useSearchParams } from "next/navigation";
 import { useMemo } from "react";
 import getRegionCodes from "@/utils/getRegionCodes";
 import { RegionSwitcher } from "./RegionSwitcher";
 import { defaultRegion } from "@/constants";
+import { Video } from "@/components/Video";
 
 export const Trending: Component = ({}) => {
 	const client = useClient();
@@ -88,7 +89,7 @@ export const Trending: Component = ({}) => {
 					{data && error === null && (
 						<div className="grid gap-4 py-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
 							{data.map((video) => (
-								<VideoCard key={video.id} data={video} />
+								<Video key={video.id} data={video} />
 							))}
 						</div>
 					)}

src/client/adapters/index.ts

@@ -1,8 +1,8 @@
 import { Suggestions } from "@/client/typings/search/suggestions";
-import { TrendingVideo } from "@/client/typings/trending";
+import { VideoPreview } from "@/client/typings/trending";
 
 export interface ConnectedAdapter {
-	getTrending(region: string): Promise<TrendingVideo[]>;
+	getTrending(region: string): Promise<VideoPreview[]>;
 
 	getSearchSuggestions(query: string): Promise<Suggestions>;
 }

src/client/adapters/invidious/transformer.ts

@@ -1,11 +1,11 @@
-import { TrendingVideo } from "@/client/typings/trending";
+import { VideoPreview } from "@/client/typings/trending";
 
 import InvidiousTrending from "./typings/trending";
 import InvidiousSuggestions from "./typings/search/suggestions";
 import { Suggestions } from "@/client/typings/search/suggestions";
 
 export default class Transformer {
-	public static trending(data: InvidiousTrending[]): TrendingVideo[] {
+	public static trending(data: InvidiousTrending[]): VideoPreview[] {
 		return data.map((video) => {
 			const thumbnail = video.videoThumbnails.find(
 				(thumbnail) =>

src/client/adapters/piped/transformer.ts

@@ -1,4 +1,4 @@
-import { TrendingVideo } from "@/client/typings/trending";
+import { VideoPreview } from "@/client/typings/trending";
 
 import PipedTrending from "./typings/trending";
 
@@ -6,7 +6,7 @@ const videoIdRegex = /\/watch\?v=(.+)/;
 const channelIdRegex = /\/channel\/(.+)/;
 
 export default class Transformer {
-	public static trending(data: PipedTrending[]): TrendingVideo[] {
+	public static trending(data: PipedTrending[]): VideoPreview[] {
 		return data.map((video) => {
 			const videoIdMatch = video.url.match(videoIdRegex);
 

src/client/index.ts

@@ -1,4 +1,4 @@
-import { TrendingVideo } from "./typings/trending";
+import { VideoPreview } from "./typings/videoPreview";
 
 import InvidiousAdapter from "./adapters/invidious";
 import PipedAdapter from "./adapters/piped";
@@ -48,7 +48,7 @@ export default class Client {
 		return adapter.connect(api.baseUrl);
 	}
 
-	public async getTrending(region: string): Promise<TrendingVideo[]> {
+	public async getTrending(region: string): Promise<VideoPreview[]> {
 		const adapter = this.getBestAdapter();
 
 		return await adapter.getTrending(region);

src/client/typings/videoPreview.ts

@@ -1,4 +1,4 @@
-export interface TrendingVideo {
+export interface VideoPreview {
 	title: string;
 	thumbnail: string;
 	id: string;

src/components/ContextMenu.tsx

@@ -0,0 +1,23 @@
+import { Component } from "@/typings/component";
+import { Listbox, ListboxItem } from "@nextui-org/listbox";
+
+export interface ContextMenuItem {
+	title: string;
+	key: string;
+	href?: string;
+	onClick?: () => any;
+}
+
+export const ContextMenu: Component<{ menu: ContextMenuItem[] }> = ({
+	menu
+}) => {
+	return (
+		<Listbox aria-label="Context Menu">
+			{menu.map((item) => (
+				<ListboxItem onClick={item.onClick} key={item.key} href={item.href}>
+					{item.title}
+				</ListboxItem>
+			))}
+		</Listbox>
+	);
+};

src/components/Video.tsx

@@ -1,4 +1,4 @@
-import { TrendingVideo } from "@/client/typings/trending";
+import { VideoPreview } from "@/client/typings/videoPreview";
 import { Component } from "@/typings/component";
 import { Card, CardFooter, CardBody } from "@nextui-org/card";
 import { Image } from "@nextui-org/image";
@@ -7,9 +7,7 @@ import Link from "next/link";
 import formatViewCount from "@/utils/formatViewCount";
 import formatDuration from "@/utils/formatDuration";
 
-export const VideoCard: Component<{ data: TrendingVideo }> = ({
+export const Video: Component<{ data: VideoPreview }> = ({ data: video }) => {
-	data: video
-}) => {
 	const handleContextMenu = () => {};
 
 	return (