Merge pull request #3 from seemorg/dev

Prod deployment
seemorg · Mar 31, 2024 · 5943c98 · 5943c98
2 parents abd52bd + 11a082e
commit 5943c98
Show file tree

Hide file tree

Showing 52 changed files with 1,814 additions and 631 deletions.
diff --git a/package.json b/package.json
@@ -38,13 +38,15 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/themes": "^3.0.0",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tanstack/react-query": "^5.22.2",
     "@tanstack/react-virtual": "^3.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
     "drizzle-orm": "^0.29.3",
+    "embla-carousel-react": "^8.0.0",
     "fuse.js": "^7.0.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.356.0",
@@ -55,6 +57,7 @@
     "nprogress": "^0.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-remove-scroll": "^2.5.9",
     "react-resizable-panels": "^2.0.9",
     "react-virtuoso": "^4.7.1",
     "resend": "^3.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/[locale]/(entityPages)/author/[authorSlug]/page.tsx b/src/app/[locale]/(entityPages)/author/[authorSlug]/page.tsx
@@ -2,7 +2,7 @@
 import BookSearchResult from "@/components/book-search-result";
 import GenresFilter from "@/components/genres-filter";
 import SearchResults from "@/components/search-results";
-import { searchBooks } from "@/lib/search";
+import { searchBooks } from "@/server/typesense/book";
 import { findAuthorBySlug } from "@/server/services/authors";
 import { notFound } from "next/navigation";
 import { withParamValidation } from "next-typesafe-url/app/hoc";
@@ -13,10 +13,10 @@ import { ExpandibleList } from "@/components/ui/expandible-list";
 import TruncatedText from "@/components/ui/truncated-text";
 import { Button } from "@/components/ui/button";
 import { Link } from "@/navigation";
-import { toTitleCase } from "@/lib/string";
+// import { toTitleCase } from "@/lib/string";
 import DottedList from "@/components/ui/dotted-list";
 import { getLocale, getTranslations } from "next-intl/server";
-import { AppLocale } from "~/i18n.config";
+import type { AppLocale } from "~/i18n.config";
 
 type AuthorPageProps = InferPagePropsType<RouteType>;
 

diff --git a/src/app/[locale]/(entityPages)/century/[centurySlug]/page.tsx b/src/app/[locale]/(entityPages)/century/[centurySlug]/page.tsx
@@ -1,4 +1,4 @@
-import { searchBooks } from "@/lib/search";
+import { searchBooks } from "@/server/typesense/book";
 import { notFound } from "next/navigation";
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import { Route, type RouteType } from "./routeType";

diff --git a/src/app/[locale]/(entityPages)/genre/[genreSlug]/page.tsx b/src/app/[locale]/(entityPages)/genre/[genreSlug]/page.tsx
@@ -1,6 +1,6 @@
 import BookSearchResult from "@/components/book-search-result";
 import SearchResults from "@/components/search-results";
-import { searchBooks } from "@/lib/search";
+import { searchBooks } from "@/server/typesense/book";
 import { notFound } from "next/navigation";
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import { Route, type RouteType } from "./routeType";

diff --git a/src/app/[locale]/(entityPages)/region/[regionSlug]/page.tsx b/src/app/[locale]/(entityPages)/region/[regionSlug]/page.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-key */
-import { searchBooks } from "@/lib/search";
+import { searchBooks } from "@/server/typesense/book";
 import { notFound } from "next/navigation";
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import { Route, type RouteType } from "./routeType";

diff --git a/src/app/[locale]/(rootEntityPages)/authors/page.tsx b/src/app/[locale]/(rootEntityPages)/authors/page.tsx
@@ -4,13 +4,13 @@ import type { InferPagePropsType } from "next-typesafe-url";
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import dynamic from "next/dynamic";
 import YearFilterSkeleton from "@/components/year-filter/skeleton";
-import { searchAuthors } from "@/lib/search";
 import { gregorianYearToHijriYear } from "@/lib/date";
 import AuthorSearchResult from "@/components/author-search-result";
 import RegionsFilter from "@/components/regions-filter";
 import { countAllAuthors } from "@/server/services/authors";
 import RootEntityPage from "../root-entity-page";
 import { getTranslations } from "next-intl/server";
+import { searchAuthors } from "@/server/typesense/author";
 
 const YearFilter = dynamic(() => import("@/components/year-filter"), {
   ssr: false,

diff --git a/src/app/[locale]/(rootEntityPages)/root-entity-page.tsx b/src/app/[locale]/(rootEntityPages)/root-entity-page.tsx
@@ -15,7 +15,9 @@ export default function RootEntityPage({
         <Container className="flex flex-col items-center">
           <h1 className="text-6xl font-bold sm:text-7xl">{title}</h1>
           {description && (
-            <p className="mt-5 text-lg text-secondary">{description}</p>
+            <p className="mt-5 text-lg text-secondary dark:text-gray-300">
+              {description}
+            </p>
           )}
         </Container>
       </div>

diff --git a/src/app/[locale]/(rootEntityPages)/texts/page.tsx b/src/app/[locale]/(rootEntityPages)/texts/page.tsx
@@ -1,18 +1,24 @@
 import BookSearchResult from "@/components/book-search-result";
 import GenresFilter from "@/components/genres-filter";
 import SearchResults from "@/components/search-results";
-import { searchBooks } from "@/lib/search";
+import { searchBooks } from "@/server/typesense/book";
 import { withParamValidation } from "next-typesafe-url/app/hoc";
 import { Route, type RouteType } from "./routeType";
 import type { InferPagePropsType } from "next-typesafe-url";
 import { booksSorts } from "@/lib/urls";
 import RegionsFilter from "@/components/regions-filter";
 import AuthorsFilter from "@/components/authors-filter";
-import YearFilter from "@/components/year-filter";
 import { gregorianYearToHijriYear } from "@/lib/date";
 import { countAllBooks } from "@/server/services/books";
 import RootEntityPage from "../root-entity-page";
 import { getTranslations } from "next-intl/server";
+import YearFilterSkeleton from "@/components/year-filter/skeleton";
+import dynamic from "next/dynamic";
+
+const YearFilter = dynamic(() => import("@/components/year-filter"), {
+  ssr: false,
+  loading: () => <YearFilterSkeleton defaultRange={[0, 0]} maxYear={0} />,
+});
 
 type TextsPageProps = InferPagePropsType<RouteType>;
 

diff --git a/src/app/[locale]/t/[bookId]/_components/sidebar/collapsed-sidebar.tsx b/src/app/[locale]/t/[bookId]/_components/sidebar/collapsed-sidebar.tsx
@@ -17,7 +17,7 @@ export default function CollapsedSidebar({
   };
 
   return (
-    <div className="sticky top-0 flex h-screen flex-none flex-col items-center justify-center bg-slate-50 shadow-inner dark:bg-slate-700">
+    <div className="sticky top-0 flex h-screen flex-none flex-col items-center justify-center bg-slate-50 shadow-inner dark:bg-card">
       <div className="absolute bottom-0 top-0 z-0 w-px bg-border ltr:left-0 rtl:right-0" />
       <div className="pointer-events-none absolute inset-y-0 w-[50vw] max-w-full ltr:left-0 rtl:right-0" />
 

diff --git a/src/app/[locale]/t/[bookId]/_components/sidebar/sidebar-resizer.tsx b/src/app/[locale]/t/[bookId]/_components/sidebar/sidebar-resizer.tsx
@@ -48,7 +48,7 @@ export default function SidebarResizer({
 
   return (
     <>
-      <Navbar sidebarContent={sidebar} />
+      <Navbar mobileMenu={sidebar} />
 
       <ResizablePanelGroup
         direction="horizontal"

diff --git a/src/app/[locale]/t/[bookId]/_components/sidebar/wrapper.tsx b/src/app/[locale]/t/[bookId]/_components/sidebar/wrapper.tsx
@@ -13,7 +13,7 @@ export default function SidebarWrapper({
   return (
     <div
       className={cn(
-        "sticky top-0 flex h-screen flex-none flex-col overflow-y-auto bg-slate-50 pb-16 pt-10 shadow-inner transition-transform will-change-transform dark:bg-slate-700",
+        "sticky top-0 flex h-screen flex-none flex-col overflow-y-auto bg-slate-50 pb-16 pt-20 shadow-inner transition-transform will-change-transform dark:bg-card sm:pt-10",
         showNavbar && "lg:translate-y-14",
       )}
     >

diff --git a/src/app/_components/homepage-section/index.tsx b/src/app/_components/homepage-section/index.tsx
@@ -1,14 +1,17 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
 import { Link } from "@/navigation";
-import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
-import { useRef, useState } from "react";
-import { useIsomorphicLayoutEffect } from "usehooks-ts";
-import Swiper from "swiper";
-import { Navigation } from "swiper/modules";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import ComingSoonModal from "@/components/coming-soon-modal";
 
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
 const HomepageSection = ({
   title,
   href,
@@ -18,58 +21,6 @@ const HomepageSection = ({
   href?: string;
   items: React.ReactNode[];
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const swiper = useRef<Swiper>();
-
-  const [navigation, setNavigation] = useState({
-    hasPrev: false,
-    hasNext: true,
-  });
-
-  useIsomorphicLayoutEffect(() => {
-    swiper.current = new Swiper(containerRef.current!, {
-      modules: [Navigation],
-      direction: "horizontal",
-      freeMode: true,
-      // watchSlidesProgress: true,
-      slidesPerView: "auto",
-      // slidesPerGroupSkip: 1,
-      // watchOverflow: true,
-      // breakpoints: {
-      //   320: {
-      //     slidesPerView: 2.2,
-      //   },
-      //   640: {
-      //     slidesPerView: 3.5,
-      //   },
-      //   768: {
-      //     slidesPerView: "auto",
-      //   },
-      // },
-      on: {
-        slideChange: (e) => {
-          console.log({
-            activeIndex: e.activeIndex,
-            slides: e.slides.length,
-          });
-
-          setNavigation({
-            hasPrev: e.activeIndex !== 0,
-            hasNext: e.activeIndex !== e.slides.length - 2,
-          });
-        },
-      },
-    });
-  }, []);
-
-  const prev = () => {
-    swiper.current?.slidePrev();
-  };
-
-  const next = () => {
-    swiper.current?.slideNext();
-  };
-
   const sectionTitle = (
     <h2 className="group flex items-center gap-1 text-2xl font-semibold transition-colors hover:text-primary">
       {title}{" "}
@@ -78,7 +29,7 @@ const HomepageSection = ({
   );
 
   return (
-    <>
+    <Carousel className="relative w-full pb-10">
       <div className="flex items-center justify-between">
         {href ? (
           <Link href={href}>{sectionTitle}</Link>
@@ -87,23 +38,9 @@ const HomepageSection = ({
         )}
 
         <div className="flex items-center">
-          <Button
-            size="icon"
-            variant="ghost"
-            onClick={prev}
-            disabled={!navigation.hasPrev}
-          >
-            <ChevronLeftIcon className="h-5 w-5 rtl:rotate-180" />
-          </Button>
+          <CarouselPrevious />
 
-          <Button
-            size="icon"
-            variant="ghost"
-            onClick={next}
-            disabled={!navigation.hasNext}
-          >
-            <ChevronRightIcon className="h-5 w-5 rtl:rotate-180" />
-          </Button>
+          <CarouselNext />
         </div>
       </div>
 
@@ -113,21 +50,19 @@ const HomepageSection = ({
         <ScrollBar orientation="horizontal" />
       </ScrollArea> */}
 
-      <div ref={containerRef} className="swiper relative mt-10 w-full">
-        <div className="swiper-wrapper w-full pb-10">
-          {items.map((item, idx) => (
-            <div className="swiper-slide flex !w-auto flex-shrink-0" key={idx}>
-              <div className="w-[140px] flex-shrink-0 sm:w-[160px] md:w-[180px]">
-                {item}
-              </div>
-              {idx !== items.length - 1 && (
-                <div className="w-3 flex-shrink-0 sm:w-5" />
-              )}
+      <CarouselContent className="mt-10">
+        {items.map((item, idx) => (
+          <CarouselItem className="flex-shrink-0 basis-auto" key={idx}>
+            <div className="w-[140px] flex-shrink-0 sm:w-[160px] md:w-[180px]">
+              {item}
             </div>
-          ))}
-        </div>
-      </div>
-    </>
+            {idx !== items.length - 1 && (
+              <div className="w-3 flex-shrink-0 sm:w-5" />
+            )}
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+    </Carousel>
   );
 };