chore: question/[slug] metadata added

Author: Logannford

src/app/(app)/(questions)/question/[slug]/page.tsx

@@ -10,6 +10,28 @@ import { getRandomQuestion } from '@/utils/data/questions/get-random';
 import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
 import RelatedQuestions from '@/components/app/questions/single/related-question-card';
 import ResizableLayout from '@/components/ui/resizable-layout';
+import { capitalise, createMetadata } from '@/utils';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const question = await getQuestion('slug', params.slug);
+  // get the title via slug and removing the - from the slug
+  const title = question?.slug?.replace(/-/g, ' ') || 'Coding Question';
+
+  return createMetadata({
+    title: `${capitalise(title)} | TechBlitz`,
+    description: 'Boost your coding skills for free with TechBlitz',
+    image: {
+      text: `${title} | TechBlitz`,
+      bgColor: '#000000',
+      textColor: '#ffffff',
+    },
+    canonicalUrl: `/question/${params.slug}`,
+  });
+}
 
 export default async function TodaysQuestionPage({
   params,

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

@@ -49,15 +49,30 @@ export default async function QuestionPageSidebar(opts: {
                 />
                 <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>
+                  <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                      <TooltipTrigger>
+                        <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>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>
+                          Your longest streak was{' '}
+                          {userStreak?.streakData?.longestStreak} days.
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+
                   <div className="flex flex-col gap-y-2 items-center">
                     <p className="text-sm text-gray-400">Current streak</p>
                     <CurrentStreak />