Merge pull request #127 from Logannford/dashboard/all-questions-bento-box-component

Dashboard/all questions bento box component

Author: Logannford

src/app/(default_layout)/dashboard/page.tsx

@@ -18,7 +18,7 @@ export default async function Dashboard() {
         </div>
       </div>
       <Separator className="bg-black-50" />
-      <div className=" h-full">
+      <div className="h-full mt-1">
         <DashboardBentoGrid />
       </div>
     </div>

src/app/(default_layout)/layout.tsx

@@ -29,7 +29,7 @@ export default function Layout({
 
             {/* Scrollable content */}
             <AppSidebar />
-            <main className="w-full pr-6 py-6 lg:pt-8 lg:pb-3">
+            <main className="w-full pr-6 py-6 lg:pt-6 lg:pb-3">
               <div className="lg:pl-4 h-full">
                 {/* <SidebarTrigger className="size-4 h-full flex items-center my-auto -top-2.5 relative" /> */}
                 {children}

src/app/globals.css

@@ -27,6 +27,10 @@ body {
   .text-balance {
     text-wrap: balance;
   }
+  
+  .pause-animation {
+    animation-play-state: paused;
+  } 
 }
 
 /* Basic editor styles */

src/components/dashboard/dashboard-bento-grid.tsx

@@ -12,6 +12,7 @@ import TodaysLeaderboardBentoBox from '@/components/leaderboard/bento-box';
 import { getUserFromSession } from '@/actions/user/get-user';
 import UserRank from '../leaderboard/user-rank';
 import { Button } from '../ui/button';
+import AllQuestionsDashboardBentoBox from '../questions/dashboard/all-questions-bento-box';
 
 export default async function DashboardBentoGrid() {
   const todaysQuestion = await getTodaysQuestion();
@@ -62,9 +63,7 @@ export default async function DashboardBentoGrid() {
       className: 'md:col-span-1 text-white',
     },
     {
-      title: 'All Questions',
-      description: 'View all questions and improve your knowledge',
-      header: <Skeleton />,
+      header: <AllQuestionsDashboardBentoBox />,
       className: 'md:col-span-1 text-white',
       href: '/previous-questions',
     },

src/components/global/chip.tsx

@@ -0,0 +1,11 @@
+export default function Chip(opts: { text: string; color: string }) {
+  const { text, color } = opts;
+
+  return (
+    <span
+      className={`px-2 py-1 text-xs font-semibold text-white rounded-md bg-${color}`}
+    >
+      {text}
+    </span>
+  );
+}

src/components/questions/dashboard/all-questions-bento-box.tsx

@@ -0,0 +1,48 @@
+'use client';
+import React, { useState } from 'react';
+import Chip from '../../global/chip';
+import DashboardQuestionCard from './dashboard-question-card';
+import { Arrow } from '@radix-ui/react-tooltip';
+import { ArrowRight } from 'lucide-react';
+
+export default function AllQuestionsDashboardBentoBox() {
+  const questions = [
+    'What does the spread operator do?',
+    "What's the difference between '==' and '==='?",
+    'What will be the outcome of the following JavaScript snippet?',
+    'What are the differences objects and arrays?',
+    'What is the difference between .map and .forEach?',
+    'Explain component lifecycle',
+  ];
+
+  // Triple the questions to ensure smooth infinite scroll
+  const [allQuestions] = useState([...questions, ...questions, ...questions]);
+
+  return (
+    <section className="h-full flex flex-col gap-y-5 group">
+      <div className="space-y-3">
+        <Chip color="accent" text="Questions" />
+        <h6 className="text-lg lg:text-xl flex items-center">
+          View all Questions
+          <ArrowRight className="w-4 h-4 inline-block ml-1 group-hover:ml-2 duration-300" />
+        </h6>
+      </div>
+
+      <div className="relative overflow-hidden mt-3 h-64">
+        <div
+          className="animate-scroll hover:pause-animation"
+          style={
+            { '--question-count': questions.length } as React.CSSProperties
+          }
+        >
+          {allQuestions.map((question, index) => (
+            <DashboardQuestionCard
+              key={`${question}-${index}`}
+              question={question}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/questions/dashboard/dashboard-question-card.tsx

@@ -0,0 +1,26 @@
+import { CheckIcon } from '@radix-ui/react-icons';
+import { X } from 'lucide-react';
+
+export default function DashboardQuestionCard({
+  question,
+}: {
+  question: string;
+}) {
+  const randomQuestion = Math.random() > 0.5;
+
+  return (
+    <div className="bg-black-100 border border-black-50 rounded-md p-4 mb-4">
+      <div className="flex items-center">
+        <div className="flex items-center justify-center size-4 border rounded-sm border-black-50 mr-3">
+          {/** randomly add a tick icon */}
+          {randomQuestion ? (
+            <CheckIcon className="w-4 h-4 text-green-500" />
+          ) : (
+            <X className="w-4 h-4 text-red-500" />
+          )}
+        </div>
+        <span className="text-sm font-ubuntu">{question}</span>
+      </div>
+    </div>
+  );
+}

src/components/ui/bento-grid.tsx

@@ -9,7 +9,7 @@ export const BentoGrid = ({
   children?: React.ReactNode;
 }) => {
   return (
-    <div className={cn('grid grid-cols-1 md:grid-cols-3 gap-6 ', className)}>
+    <div className={cn('grid grid-cols-1 md:grid-cols-3 gap-6', className)}>
       {children}
     </div>
   );
@@ -30,39 +30,43 @@ export const BentoGridItem = ({
   icon?: React.ReactNode;
   href?: string;
 }) => {
-  const content = (
-    <>
-      {header}
-      <div className="group-hover/bento:translate-x-2 transition duration-200">
-        {icon}
-        <div className="font-bold text-white mb-1 mt-2 font-satoshi text-lg">
-          {title}
-        </div>
-        <div className="font-normal text-sm text-white">{description}</div>
-      </div>
-    </>
+  const renderContent = () => {
+    const hasContent = title || description || icon;
+
+    return (
+      <>
+        {header}
+        {hasContent && (
+          <div className="group-hover/bento:translate-x-2 transition duration-200">
+            {icon}
+            {title && (
+              <div className="font-bold text-white mb-1 mt-2 font-satoshi text-lg">
+                {title}
+              </div>
+            )}
+            {description && (
+              <div className="font-normal text-sm text-white">
+                {description}
+              </div>
+            )}
+          </div>
+        )}
+      </>
+    );
+  };
+
+  const baseClasses = cn(
+    'row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-black-75 border border-transparent justify-between flex flex-col',
+    // Only add space-y-4 if there's content to space
+    header || title || description || icon ? 'space-y-4' : '',
+    className
   );
 
-  // If `href` is provided, wrap the content in a Link or anchor tag
   return href ? (
-    <Link
-      href={href}
-      className={cn(
-        'row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-black-75 border border-transparent justify-between flex flex-col space-y-4',
-        className
-      )}
-      prefetch
-    >
-      {content}
+    <Link href={href} className={baseClasses} prefetch>
+      {renderContent()}
     </Link>
   ) : (
-    <div
-      className={cn(
-        'row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-black-75 border border-transparent justify-between flex flex-col space-y-4',
-        className
-      )}
-    >
-      {content}
-    </div>
+    <div className={baseClasses}>{renderContent()}</div>
   );
 };

tailwind.config.ts

@@ -116,10 +116,19 @@ const config: Config = {
             height: '0',
           },
         },
+        scroll: {
+          '0%': {
+            transform: 'translateY(0)',
+          },
+          '100%': {
+            transform: 'translateY(calc(-72px * var(--question-count)))',
+          },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        scroll: 'scroll 30s linear infinite',
       },
     },
   },