From 40e0fe248f8533685446f41ea80779e98a74d2af Mon Sep 17 00:00:00 2001 From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com> Date: Wed, 19 Jun 2024 20:01:52 +0200 Subject: [PATCH] Update import statements for ScriptItem component and UI card component --- components/LatestScripts.tsx | 113 ---------- components/MostViewedScripts.tsx | 109 ---------- components/RecentlyUpdatedScripts.tsx | 116 ---------- components/ScriptInfoBlocks.tsx | 299 ++++++++++++++++++++++++++ components/ScriptItem.tsx | 4 +- components/ui/card.tsx | 6 +- 6 files changed, 303 insertions(+), 344 deletions(-) delete mode 100644 components/LatestScripts.tsx delete mode 100644 components/MostViewedScripts.tsx delete mode 100644 components/RecentlyUpdatedScripts.tsx create mode 100644 components/ScriptInfoBlocks.tsx diff --git a/components/LatestScripts.tsx b/components/LatestScripts.tsx deleted file mode 100644 index 3681c1c..0000000 --- a/components/LatestScripts.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { useMemo, useState } from "react"; -import { Category } from "@/lib/types"; -import Link from "next/link"; -import Image from "next/image"; -import { Button } from "./ui/button"; -import { extractDate } from "@/lib/time"; - -const ITEMS_PER_PAGE = 3; - -function LatestScripts({ items }: { items: Category[] }) { - const [page, setPage] = useState(1); - - const latestScripts = useMemo(() => { - if (!items) return []; - const scripts = items.flatMap((category) => category.expand.items || []); - return scripts.sort( - (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime(), - ); - }, [items]); - - const goToNextPage = () => { - setPage((prevPage) => prevPage + 1); - }; - - const goToPreviousPage = () => { - setPage((prevPage) => prevPage - 1); - }; - - const startIndex = (page - 1) * ITEMS_PER_PAGE; - const endIndex = page * ITEMS_PER_PAGE; - - if (!items) { - return null; - } - - return ( -
- {latestScripts.length > 0 && ( -
-

Newest Scripts

-
- {page > 1 && ( -
- Previous -
- )} - {endIndex < latestScripts.length && ( -
- {page === 1 ? "More.." : "Next"} -
- )} -
-
- )} -
- {latestScripts.slice(startIndex, endIndex).map((item) => ( - - - -
- -
-

- {item.title} {item.item_type} -

- -

- Date added: {extractDate(item.created)} -

- - - - {item.description} - - - - - - - ))} -
-
- ); -} - -export default LatestScripts; diff --git a/components/MostViewedScripts.tsx b/components/MostViewedScripts.tsx deleted file mode 100644 index c42f4e3..0000000 --- a/components/MostViewedScripts.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { useState, useMemo } from "react"; -import { Category } from "@/lib/types"; -import Link from "next/link"; -import Image from "next/image"; -import { Button } from "./ui/button"; -import { extractDate } from "@/lib/time"; - -const ITEMS_PER_PAGE = 3; - -export default function MostViewedScripts({ items }: { items: Category[] }) { - const [page, setPage] = useState(1); - - const mostViewedScripts = useMemo(() => { - if (!items) return []; - const scripts = items.flatMap((category) => category.expand.items || []); - const mostViewedScripts = scripts - .filter((script) => script.isMostViewed) - .map((script) => ({ - ...script, - })) - .sort((a, b) => a.mostViewedPosition - b.mostViewedPosition); - return mostViewedScripts; - }, [items]); - - const goToNextPage = () => { - setPage((prevPage) => prevPage + 1); - }; - - const goToPreviousPage = () => { - setPage((prevPage) => prevPage - 1); - }; - - const startIndex = (page - 1) * ITEMS_PER_PAGE; - const endIndex = page * ITEMS_PER_PAGE; - - return ( -
- {mostViewedScripts.length > 0 && ( - <> -

Most Viewed Scripts

-

- This data, unfortunately, is not directly influenced by interacting - with the website. (yet) -

- - )} -
- {mostViewedScripts.slice(startIndex, endIndex).map((item) => ( - - - -
- -
-

- {item.title} {item.item_type} -

- -

- Date added: {extractDate(item.created)} -

- - - - {item.description} - - - - - - - ))} -
-
- {page > 1 && ( - - )} - {endIndex < mostViewedScripts.length && ( - - )} -
-
- ); -} diff --git a/components/RecentlyUpdatedScripts.tsx b/components/RecentlyUpdatedScripts.tsx deleted file mode 100644 index c9f687d..0000000 --- a/components/RecentlyUpdatedScripts.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from "@/components/ui/card"; -import { useState, useMemo } from "react"; -import { Category } from "@/lib/types"; -import Link from "next/link"; -import Image from "next/image"; -import { Button } from "./ui/button"; - -const ITEMS_PER_PAGE = 3; - -export default function RecentlyUpdatedScripts({ - items, -}: { - items: Category[]; -}) { - const [page, setPage] = useState(1); - - const updatedScripts = useMemo(() => { - if (!items) return []; - const scripts = items.flatMap((category) => category.expand.items || []); - const updatedScripts = scripts.map((script) => ({ - ...script, - updated: new Date(script.updated), - })); - return updatedScripts.sort( - (a, b) => b.updated.getTime() - a.updated.getTime(), - ); - }, [items]); - - const goToNextPage = () => { - setPage((prevPage) => prevPage + 1); - }; - - const goToPreviousPage = () => { - setPage((prevPage) => prevPage - 1); - }; - - const startIndex = (page - 1) * ITEMS_PER_PAGE; - const endIndex = page * ITEMS_PER_PAGE; - - return ( -
- {updatedScripts.length > 0 && ( -
-

- Recently Updated Scripts -

-
- {page > 1 && ( -
- Previous -
- )} - {endIndex < updatedScripts.length && ( -
- {page === 1 ? "More.." : "Next"} -
- )} -
-
- )} -
- {updatedScripts.slice(startIndex, endIndex).map((item) => ( - - - -
- -
-

- {item.title} {item.item_type} -

- -

- Last updated: {item.updated.toISOString().split("T")[0]} -

- - - - {item.description} - - - - - - - ))} -
-
- ); -} diff --git a/components/ScriptInfoBlocks.tsx b/components/ScriptInfoBlocks.tsx new file mode 100644 index 0000000..1a7a50a --- /dev/null +++ b/components/ScriptInfoBlocks.tsx @@ -0,0 +1,299 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { useMemo, useState } from "react"; +import { Category } from "@/lib/types"; +import Link from "next/link"; +import Image from "next/image"; +import { Button } from "./ui/button"; +import { extractDate } from "@/lib/time"; + +const ITEMS_PER_PAGE = 3; + +export function LatestScripts({ items }: { items: Category[] }) { + const [page, setPage] = useState(1); + + const latestScripts = useMemo(() => { + if (!items) return []; + const scripts = items.flatMap((category) => category.expand.items || []); + return scripts.sort( + (a, b) => new Date(b.created).getTime() - new Date(a.created).getTime(), + ); + }, [items]); + + const goToNextPage = () => { + setPage((prevPage) => prevPage + 1); + }; + + const goToPreviousPage = () => { + setPage((prevPage) => prevPage - 1); + }; + + const startIndex = (page - 1) * ITEMS_PER_PAGE; + const endIndex = page * ITEMS_PER_PAGE; + + if (!items) { + return null; + } + + return ( +
+ {latestScripts.length > 0 && ( +
+

Newest Scripts

+
+ {page > 1 && ( +
+ Previous +
+ )} + {endIndex < latestScripts.length && ( +
+ {page === 1 ? "More.." : "Next"} +
+ )} +
+
+ )} +
+ {latestScripts.slice(startIndex, endIndex).map((item) => ( + + + +
+ +
+

+ {item.title} {item.item_type} +

+ +

+ Date added: {extractDate(item.created)} +

+ + + {item.description} + + + + + + ))} +
+
+ ); +} + +export function MostViewedScripts({ items }: { items: Category[] }) { + const [page, setPage] = useState(1); + + const mostViewedScripts = useMemo(() => { + if (!items) return []; + const scripts = items.flatMap((category) => category.expand.items || []); + const mostViewedScripts = scripts + .filter((script) => script.isMostViewed) + .map((script) => ({ + ...script, + })) + .sort((a, b) => a.mostViewedPosition - b.mostViewedPosition); + return mostViewedScripts; + }, [items]); + + const goToNextPage = () => { + setPage((prevPage) => prevPage + 1); + }; + + const goToPreviousPage = () => { + setPage((prevPage) => prevPage - 1); + }; + + const startIndex = (page - 1) * ITEMS_PER_PAGE; + const endIndex = page * ITEMS_PER_PAGE; + + return ( +
+ {mostViewedScripts.length > 0 && ( + <> +

Most Viewed Scripts

+

+ This data, unfortunately, is not directly influenced by interacting + with the website. (yet) +

+ + )} +
+ {mostViewedScripts.slice(startIndex, endIndex).map((item) => ( + + + +
+ +
+

+ {item.title} {item.item_type} +

+ +

+ Date added: {extractDate(item.created)} +

+ + + {item.description} + + + + + + ))} +
+
+ {page > 1 && ( + + )} + {endIndex < mostViewedScripts.length && ( + + )} +
+
+ ); +} + +export function RecentlyUpdatedScripts({ + items, +}: { + items: Category[]; +}) { + const [page, setPage] = useState(1); + + const updatedScripts = useMemo(() => { + if (!items) return []; + const scripts = items.flatMap((category) => category.expand.items || []); + const updatedScripts = scripts.map((script) => ({ + ...script, + updated: new Date(script.updated), + })); + return updatedScripts.sort( + (a, b) => b.updated.getTime() - a.updated.getTime(), + ); + }, [items]); + + const goToNextPage = () => { + setPage((prevPage) => prevPage + 1); + }; + + const goToPreviousPage = () => { + setPage((prevPage) => prevPage - 1); + }; + + const startIndex = (page - 1) * ITEMS_PER_PAGE; + const endIndex = page * ITEMS_PER_PAGE; + + return ( +
+ {updatedScripts.length > 0 && ( +
+

+ Recently Updated Scripts +

+
+ {page > 1 && ( +
+ Previous +
+ )} + {endIndex < updatedScripts.length && ( +
+ {page === 1 ? "More.." : "Next"} +
+ )} +
+
+ )} +
+ {updatedScripts.slice(startIndex, endIndex).map((item) => ( + + + +
+ +
+

+ {item.title} {item.item_type} +

+ +

+ Last updated: {item.updated.toISOString().split("T")[0]} +

+ + + {item.description} + + + + + + ))} +
+
+ ); +} \ No newline at end of file diff --git a/components/ScriptItem.tsx b/components/ScriptItem.tsx index 7774026..1467c1c 100644 --- a/components/ScriptItem.tsx +++ b/components/ScriptItem.tsx @@ -19,9 +19,7 @@ import Link from "next/link"; import { Category, Script } from "@/lib/types"; import { useSearchParams } from "next/navigation"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import LatestScripts from "./LatestScripts"; -import MostViewedScripts from "./MostViewedScripts"; -import RecentlyUpdatedScripts from "./RecentlyUpdatedScripts"; +import { MostViewedScripts, LatestScripts, RecentlyUpdatedScripts } from "@/components/ScriptInfoBlocks" function ScriptItem({ items, diff --git a/components/ui/card.tsx b/components/ui/card.tsx index 5e2f29d..1c6bc27 100644 --- a/components/ui/card.tsx +++ b/components/ui/card.tsx @@ -23,7 +23,7 @@ const CardHeader = React.forwardRef< >(({ className, ...props }, ref) => (
)); @@ -63,7 +63,7 @@ const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -
+
)); CardContent.displayName = "CardContent"; @@ -73,7 +73,7 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
));