feat: add articles to collections page

app/Http/Controllers/CollectionController.php

@@ -23,6 +23,7 @@
 use App\Jobs\FetchCollectionActivity;
 use App\Jobs\FetchCollectionBanner;
 use App\Jobs\SyncCollection;
+use App\Models\Article;
 use App\Models\Collection;
 use App\Models\User;
 use App\Support\Queues;
@@ -76,6 +77,18 @@ public function index(Request $request): Response|JsonResponse|RedirectResponse
             'allowsGuests' => true,
             'filters' => fn () => $this->getFilters($request),
             'title' => fn () => trans('metatags.collections.title'),
+            'latestArticles' => fn () => ArticleData::collection(Article::isPublished()
+                                            ->with('media', 'user.media')
+                                            ->withRelatedCollections()
+                                            ->sortByPublishedDate()
+                                            ->limit(8)
+                                            ->get()),
+            'popularArticles' => fn () => ArticleData::collection(Article::isPublished()
+                                            ->with('media', 'user.media')
+                                            ->withRelatedCollections()
+                                            ->sortByPopularity()
+                                            ->limit(8)
+                                            ->get()),
             'topCollections' => fn () => CollectionOfTheMonthData::collection(Collection::query()->inRandomOrder()->limit(3)->get()),
             'collections' => fn () => PopularCollectionData::collection(
                 $collections->through(fn ($collection) => PopularCollectionData::fromModel($collection, $currency))

lang/en/pages.php

@@ -83,6 +83,7 @@
             'vote_success' => 'Your vote has been successfully submitted',
         ],
         'articles' => [
+            'heading' => 'Latest NFT News & Features',
             'no_articles' => 'No articles have been linked to this collection as of now.',
             'no_articles_with_filters' => 'We could not find any articles matching your search criteria, please try again!',
             'search_placeholder' => 'Search in Articles',

resources/js/Pages/Collections/Components/CollectionsArticles.tsx

@@ -0,0 +1,127 @@
+import { Tab } from "@headlessui/react";
+import cn from "classnames";
+import { Fragment, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArticleCard } from "@/Components/Articles/ArticleCard";
+import { ButtonLink } from "@/Components/Buttons/ButtonLink";
+import { Carousel, CarouselControls, CarouselItem } from "@/Components/Carousel";
+import { Heading } from "@/Components/Heading";
+import { Tabs } from "@/Components/Tabs";
+import { useCarousel } from "@/Hooks/useCarousel";
+
+interface Properties {
+    latest: App.Data.Articles.ArticleData[];
+    popular: App.Data.Articles.ArticleData[];
+}
+
+type TabOption = "latest" | "popular";
+
+export const CollectionsArticles = ({ latest, popular }: Properties): JSX.Element => {
+    const [tab, setTab] = useState<TabOption>("latest");
+    const articles = useMemo(() => (tab === "latest" ? latest : popular), [tab]);
+
+    const { t } = useTranslation();
+    const { slidesPerView, horizontalOffset } = useCarousel();
+
+    return (
+        <div className="articles-scroll mt-6 border-t-4 border-theme-secondary-200 pt-14 dark:border-theme-dark-800 sm:mt-8 sm:pt-8 lg:mt-12 lg:border-t-0 lg:pt-0">
+            <div className="mb-4 px-6 2xl:px-0">
+                <Heading
+                    level={1}
+                    as="h2"
+                >
+                    {t("pages.collections.articles.heading")}
+                </Heading>
+
+                <div className="mt-3 flex w-full items-center justify-between sm:mt-4">
+                    <ArticleTabs
+                        active={tab}
+                        onChange={(tab) => {
+                            setTab(tab);
+                        }}
+                    />
+
+                    <CarouselControls
+                        className="hidden sm:flex"
+                        carouselKey="articles"
+                        viewAllPath={route("articles")}
+                        navigationClass="space-x-3"
+                    />
+                </div>
+            </div>
+
+            <Carousel
+                carouselKey="articles"
+                horizontalOffset={horizontalOffset}
+                swiperClassName="-m-1 lg:-my-1 2xl:-m-1 lg:mx-7"
+                spaceBetween={0}
+                slidesPerView={slidesPerView}
+                shouldShowHeader={false}
+            >
+                {articles.map((article) => (
+                    <CarouselItem key={article.id}>
+                        <div className="h-full p-1">
+                            <ArticleCard article={article} />
+                        </div>
+                    </CarouselItem>
+                ))}
+            </Carousel>
+
+            <div className="mt-4 px-6 sm:hidden">
+                <ViewAllButton />
+            </div>
+        </div>
+    );
+};
+
+const ArticleTabs = ({ active, onChange }: { active: TabOption; onChange: (tab: TabOption) => void }): JSX.Element => {
+    const { t } = useTranslation();
+
+    return (
+        <Tab.Group
+            as="div"
+            className="w-full sm:w-auto"
+            defaultIndex={0}
+        >
+            <Tab.List>
+                <Tabs>
+                    <Tab as={Fragment}>
+                        <Tabs.Button
+                            selected={active === "latest"}
+                            onClick={() => {
+                                onChange("latest");
+                            }}
+                        >
+                            {t("pages.collections.articles.sort_latest")}
+                        </Tabs.Button>
+                    </Tab>
+
+                    <Tab as={Fragment}>
+                        <Tabs.Button
+                            selected={active === "popular"}
+                            onClick={() => {
+                                onChange("popular");
+                            }}
+                        >
+                            {t("pages.collections.articles.sort_popularity")}
+                        </Tabs.Button>
+                    </Tab>
+                </Tabs>
+            </Tab.List>
+        </Tab.Group>
+    );
+};
+
+const ViewAllButton = ({ className }: { className?: string }): JSX.Element => {
+    const { t } = useTranslation();
+
+    return (
+        <ButtonLink
+            variant="secondary"
+            href={route("articles")}
+            className={cn("w-full justify-center sm:w-auto", className)}
+        >
+            {t("common.view_all")}
+        </ButtonLink>
+    );
+};

resources/js/Pages/Collections/Index.tsx

@@ -3,6 +3,7 @@ import { Head, router, usePage } from "@inertiajs/react";
 import cn from "classnames";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { CollectionsArticles } from "./Components/CollectionsArticles";
 import { CollectionsCallToAction } from "./Components/CollectionsCallToAction";
 import { FeaturedCollectionsCarousel } from "./Components/FeaturedCollections";
 import { PopularCollectionsFilterPopover } from "./Components/PopularCollectionsFilterPopover";
@@ -28,6 +29,8 @@ interface CollectionsIndexProperties extends PageProps {
     featuredCollections: App.Data.Collections.CollectionFeaturedData[];
     topCollections: App.Data.Collections.CollectionOfTheMonthData[];
     filters: Filters;
+    latestArticles: App.Data.Articles.ArticleData[];
+    popularArticles: App.Data.Articles.ArticleData[];
 }
 
 const demoCollection: VoteCollectionProperties = {
@@ -46,6 +49,8 @@ const CollectionsIndex = ({
     topCollections,
     auth,
     filters,
+    latestArticles,
+    popularArticles,
 }: CollectionsIndexProperties): JSX.Element => {
     const { t } = useTranslation();
 
@@ -154,6 +159,11 @@ const CollectionsIndex = ({
                 </div>
             </div>
 
+            <CollectionsArticles
+                latest={latestArticles}
+                popular={popularArticles}
+            />
+
             <CollectionsCallToAction />
         </DefaultLayout>
     );