feat(questions): new explore question page created

Author: Logannford

src/app/(app)/(default_layout)/(questions)/questions/explore/page.tsx

@@ -10,6 +10,15 @@ export async function generateMetadata() {
     title: 'Explore Questions | TechBlitz',
     description:
       'Explore a diverse set of questions across multiple topics to enhance your knowledge.',
+    keywords: [
+      'javascript coding questions',
+      'react coding questions',
+      'web development coding questions',
+      'coding challenges',
+      'coding tutorials',
+      'coding practice',
+      'coding practice questions',
+    ],
     image: {
       text: 'Explore Questions | TechBlitz',
       bgColor: '#000',
@@ -22,9 +31,8 @@ export async function generateMetadata() {
 const heroDescription = (
   <div className="flex flex-col gap-y-4 z-20 relative font-inter max-w-3xl">
     <p className="text-sm md:text-base text-gray-400">
-      Curated lists of hot topics to help you level up your programming skills.
-      Browse through our carefully selected collection of coding challenges and
-      tutorials.
+      Curated lists of coding questions, ranging from Javascript, React, Node,
+      Web Development, and more to help you level up your programming skills.
     </p>
     <div className="flex flex-col gap-y-2">
       <p className="text-gray-400">Can't find what you're looking for?</p>

src/app/(app)/(default_layout)/(questions)/questions/previous/page.tsx

@@ -12,6 +12,7 @@ import { validateSearchParams } from '@/utils/search-params';
 import { parseSearchParams } from '@/utils/search-params';
 import { getTags } from '@/utils/data/questions/tags/get-tags';
 import { createMetadata } from '@/utils';
+import { Button } from '@/components/ui/button';
 
 export async function generateMetadata() {
   return createMetadata({
@@ -26,6 +27,20 @@ export async function generateMetadata() {
   });
 }
 
+const heroDescription = (
+  <div className="flex flex-col gap-y-4 z-20 relative font-inter max-w-3xl">
+    <p className="text-sm md:text-base text-gray-400">
+      All daily questions that have been asked in the past.
+    </p>
+    <div className="flex flex-col gap-y-2">
+      <p className="text-gray-400">Want to see more questions?</p>
+      <Button href="/questions" variant="secondary">
+        View all questions
+      </Button>
+    </div>
+  </div>
+);
+
 export default async function PreviousQuestionsPage({
   searchParams,
 }: {
@@ -38,10 +53,7 @@ export default async function PreviousQuestionsPage({
 
   return (
     <>
-      <Hero
-        heading="Previous Daily Questions"
-        subheading="All daily questions that have been asked in the past."
-      />
+      <Hero heading="Previous Daily Questions" subheading={heroDescription} />
       <div className="flex flex-col h-full justify-between container mt-5">
         <div className="flex flex-col lg:flex-row w-full gap-16">
           <div className="w-full lg:min-w-[65%] space-y-6">

src/app/(app)/providers.tsx

@@ -13,12 +13,13 @@ export default function RootProvider({
   return (
     <main
       className={cn(
-        '!w-full lg:w-auto transition-[width] duration-200 ease-in-out py-6 lg:pt-4 lg:pb-3'
+        'w-full transition-[width] duration-200 ease-in-out py-6',
+        'lg:py-4 lg:pb-3',
+        {
+          'lg:w-[calc(100%-15rem)]': state === 'expanded',
+          'lg:w-[calc(100%-3rem)]': state === 'collapsed',
+        }
       )}
-      style={{
-        width:
-          state === 'expanded' ? 'calc(100% - 15rem)' : 'calc(100% - 3rem)',
-      }}
     >
       {children}
     </main>

src/components/app/questions/layout/carousel/question-carousel-card.tsx

@@ -9,12 +9,9 @@ export default function QuestionCarouselCard(opts: {
   const { questionData } = opts;
 
   return (
-    <Link
-      href={`/question/${questionData.uid}`}
-      className="h-full bg-black-100"
-    >
+    <Link href={`/question/${questionData.uid}`} className="h-full bg-black-75">
       <div className="flex flex-col justify-between space-y-5 items-start border border-black-50 hover:border-accent duration-300 p-6 rounded-lg group w-full h-full relative overflow-hidden">
-        <h6 className="text-xl text-wrap text-start line-clamp-2">
+        <h6 className="text-wrap text-start line-clamp-2">
           {questionData?.question}
         </h6>
         <div className="w-full flex justify-between items-end">

src/components/app/questions/layout/carousel/question-carousel-list.tsx

@@ -5,51 +5,40 @@ import { QuestionWithTags } from '@/types/Questions';
 export default async function QuestionsCarouselList() {
   const questionsCarousels = [
     {
-      tag: 'javascript',
+      tag: ['javascript', 'JavaScript', 'javaScript', 'generators'],
       title: 'Javascript Questions',
       description:
-        'Explore a diverse set of Javascript questions to enhance your knowledge.',
+        'Learn how to use JavaScript to build more efficient and scalable applications.',
       image: '/images/javascript.png',
       questions: [],
     },
     {
-      tag: 'react',
+      tag: ['react'],
       title: 'React Questions',
-      description:
-        'Explore a diverse set of React questions to enhance your knowledge.',
+      description: 'Explore the most popular JavaScript framework, React.',
       image: '/images/react.png',
       questions: [],
     },
     {
-      tag: 'async',
-      title: 'Async Questions',
-      description:
-        'Explore a diverse set of questions relating to asynchronous programming.',
-      image: '/images/async.png',
-      questions: [],
-    },
-    {
-      tag: 'promises',
-      title: 'Web Development Questions',
+      tag: ['react-hooks'],
+      title: 'React Hooks',
       description:
-        'Explore a diverse set of questions relating to web development.',
-      image: '/images/web-dev.png',
+        'Learn how to use React Hooks to build more efficient and scalable applications.',
+      image: '/images/react.png',
       questions: [],
     },
     {
-      tag: 'promises',
-      title: 'Web Development Questions',
-      description:
-        'Explore a diverse set of questions relating to web development.',
-      image: '/images/web-dev.png',
+      tag: ['arrays', 'Array', 'array-methods'],
+      title: 'Arrays',
+      description: 'Learn all the key concepts of arrays in JavaScript.',
+      image: '/images/arrays.png',
       questions: [],
     },
     {
-      tag: 'promises',
-      title: 'Web Development Questions',
-      description:
-        'Explore a diverse set of questions relating to web development.',
-      image: '/images/web-dev.png',
+      tag: ['async', 'promises'],
+      title: 'Asynchronous Programming',
+      description: 'Learn how to handle asynchronous operations in JavaScript.',
+      image: '/images/async.png',
       questions: [],
     },
   ];
@@ -66,12 +55,16 @@ export default async function QuestionsCarouselList() {
     <div className="flex flex-col gap-y-16 md:gap-y-28 pt-10">
       {questionsByTag.map((carousel) => (
         <QuestionCarousel
-          key={carousel.tag}
+          key={carousel.title}
           heading={carousel.title}
           description={carousel.description}
           image={carousel.image}
-          questions={carousel.questions as unknown as QuestionWithTags[]}
-          tag={carousel.tag as 'javascript' | 'react' | 'async' | 'web-dev'}
+          questions={
+            (carousel.questions[0]?.questions.map(
+              (q) => q.question
+            ) as unknown as QuestionWithTags[]) || []
+          }
+          tag={carousel.tag}
         />
       ))}
     </div>

src/components/app/questions/layout/carousel/question-carousel.tsx

@@ -2,10 +2,14 @@ import {
   Carousel,
   CarouselItem,
   CarouselContent,
+  CarouselNext,
+  CarouselPrevious,
 } from '@/components/ui/carousel';
 import { QuestionWithTags } from '@/types/Questions';
 
 import QuestionCarouselCard from './question-carousel-card';
+import { Button } from '@/components/ui/button';
+import { ChevronRight } from 'lucide-react';
 
 /**
  * A carousel that will showcase a set of questions.
@@ -18,7 +22,7 @@ export default function QuestionCarousel(opts: {
   description: string | React.ReactNode;
   image: string;
   questions: QuestionWithTags[];
-  tag: 'javascript' | 'react' | 'web-dev' | 'async';
+  tag: string | string[];
 }) {
   const { heading, description, image, questions, tag } = opts;
 
@@ -31,33 +35,59 @@ export default function QuestionCarousel(opts: {
   });
 
   return (
-    <div className="flex flex-col gap-y-8">
-      <div className="flex flex-col gap-y-2">
-        <h6 className="text-xl lg:text-3xl text-wrap text-start text-gradient from-white to-white/55">
-          {heading}
-        </h6>
-        <p className="text-sm text-wrap text-start">{description}</p>
-      </div>
-      <div className="relative w-full">
-        <div className="hidden md:block absolute left-0 top-0 h-full w-12 bg-gradient-to-r from-[#000] to-transparent z-10" />
-        <div className="hidden md:block absolute right-0 top-0 h-full w-12 bg-gradient-to-l from-[#000000] to-transparent z-10" />
-        <Carousel
-          opts={{
-            loop: false,
-            dragFree: true,
-            align: 'start',
-          }}
-          className="w-full"
-        >
+    <Carousel
+      opts={{
+        loop: false,
+        dragFree: true,
+        align: 'start',
+      }}
+      className="w-full"
+    >
+      <div className="flex flex-col gap-y-8">
+        <div className="flex flex-col md:flex-row gap-4 w-full md:justify-between md:items-end">
+          <div className="flex flex-col gap-y-2">
+            <h6 className="text-xl lg:text-3xl text-wrap text-start text-gradient from-white to-white/55">
+              {heading}
+            </h6>
+            <p className="text-sm text-wrap text-start">{description}</p>
+          </div>
+          <div className="flex items-center gap-2 justify-between">
+            <Button href={`/questions?tag=${tag}`} variant="default">
+              View more
+              <ChevronRight className="size-4 ml-2" />
+            </Button>
+            <div className="flex items-center gap-2">
+              <CarouselPrevious
+                className="md:hidden border-none text-white top-0 left-0 right-0 relative translate-y-0"
+                variant="default"
+              />
+              <CarouselNext
+                className="md:hidden border-none text-white top-0 left-0 right-0 relative translate-y-0"
+                variant="default"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="relative w-full">
+          <div className="hidden md:block absolute left-0 top-0 h-full w-12 bg-gradient-to-r from-[#000] to-transparent z-10" />
+          <div className="hidden md:block absolute right-0 top-0 h-full w-12 bg-gradient-to-l from-[#000000] to-transparent z-10" />
           <CarouselContent className="grid grid-flow-col auto-cols-[calc(100%-8px)] md:auto-cols-[calc(50%-8px)] lg:auto-cols-[calc(33.33%-8px)] gap-4">
             {questions.map((q) => (
               <CarouselItem key={q.uid} className="flex">
                 <QuestionCarouselCard key={q.uid} questionData={q} />
               </CarouselItem>
             ))}
           </CarouselContent>
-        </Carousel>
+          <CarouselPrevious
+            className="hidden md:block border-none text-white -top-12 left-0 z-10"
+            variant="ghost"
+          />
+          <CarouselNext
+            className="hidden md:block border-none text-white -top-12"
+            variant="ghost"
+          />
+        </div>
       </div>
-    </div>
+    </Carousel>
   );
 }

src/components/app/questions/layout/question-page-sidebar.tsx

@@ -11,6 +11,10 @@ import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
 import { UserRecord } from '@/types/User';
 import { getUserDailyStats } from '@/utils/data/user/authed/get-daily-streak';
 import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import CurrentStreak, {
+  SolarFlameBoldDuotone,
+} from '@/components/ui/current-streak';
 
 export default async function QuestionPageSidebar(opts: {
   user: UserRecord | null;
@@ -34,14 +38,32 @@ export default async function QuestionPageSidebar(opts: {
           <h6 className="text-xl">Your current streak</h6>
           <div className="relative">
             {user ? (
-              <DatePicker
-                className="z-30 text-white bg-black-100 border border-black-50 p-2 rounded-md hover:cursor-default"
-                color="white"
-                type="range"
-                value={dateArray}
-                c="gray"
-                inputMode="none"
-              />
+              <div className="flex flex-col gap-y-4 text-white bg-black-75 border border-black-50 p-4 rounded-lg hover:cursor-default">
+                <DatePicker
+                  className="z-30"
+                  color="white"
+                  type="range"
+                  value={dateArray}
+                  c="gray"
+                  inputMode="none"
+                />
+                <Separator className="w-full bg-black-50" />
+                <div className="grid grid-cols-2 gap-4 pt-2">
+                  <div className="flex flex-col gap-y-2 items-center">
+                    <p className="text-sm text-gray-400">Longest streak</p>
+                    <div className="flex items-center gap-x-1">
+                      <p className="font-onest font-bold">
+                        {userStreak?.streakData?.longestStreak}
+                      </p>
+                      <SolarFlameBoldDuotone className="size-6" />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-y-2 items-center">
+                    <p className="text-sm text-gray-400">Current streak</p>
+                    <CurrentStreak />
+                  </div>
+                </div>
+              </div>
             ) : (
               <div className="relative">
                 <div className="absolute inset-0 backdrop-blur-[2px] z-10 flex items-center justify-center rounded-md">

src/components/global/navigation/sidebar.tsx

@@ -384,7 +384,7 @@ export function AppSidebar(opts: {
   };
 
   return (
-    <Sidebar collapsible="icon">
+    <Sidebar collapsible="icon" className="z-50">
       <SidebarContent className="py-6 bg-[#000000]">
         <SidebarGroup>
           <SidebarGroupLabel className="w-full flex items-center justify-between">

src/components/ui/carousel.tsx

@@ -204,7 +204,7 @@ const CarouselPrevious = React.forwardRef<
       variant={variant}
       size={size}
       className={cn(
-        'absolute  h-8 w-8 rounded-full',
+        'absolute h-8 w-8 rounded-full',
         orientation === 'horizontal'
           ? '-left-8 top-1/2 -translate-y-full'
           : '-top-8 left-1/2 -translate-x-1/2 rotate-90',

src/components/ui/current-streak.tsx

@@ -32,10 +32,10 @@ export default async function CurrentStreak() {
 
   return (
     <div className="flex items-center gap-x-1">
-      <SolarFlameBoldDuotone className="size-6" />
-      <p className="font-ubuntu font-bold">
+      <p className="font-onest font-bold">
         {userStreak?.streakData?.currentstreakCount}{' '}
       </p>
+      <SolarFlameBoldDuotone className="size-6" />
     </div>
   );
 }