chore: responsive tabs for dashboard route

WomB0ComB0 · WomB0ComB0 · commit 18fea54a01dd · 2024-09-04T04:02:45.000-04:00
diff --git a/next.config.mjs b/next.config.mjs
@@ -43,7 +43,7 @@ const config = {
         protocol: 'https',
         hostname: 'encrypted-tbn0.gstatic.com',
       },
-    ]
+    ],
   },
   experimental: {
     esmExternals: 'loose',
diff --git a/src/app/(auth)/signin/[id]/page.tsx b/src/app/(auth)/signin/[id]/page.tsx
@@ -164,7 +164,7 @@ export default function SignIn({
         width={1440}
         height={900}
         priority
-        style={{ width: 'auto', height: 'auto' }} 
+        style={{ width: 'auto', height: 'auto' }}
       />
     </div>
   );
diff --git a/src/app/(dashboard)/dashboard/_components/cards/VideoCard.tsx b/src/app/(dashboard)/dashboard/_components/cards/VideoCard.tsx
@@ -72,10 +72,7 @@ const VideoCard: React.FC<VideoCardProps> = memo(({ videos }) => {
                     {he.decode(video.snippet.description)}
                   </p>
                   <div className="flex flex-wrap gap-2 mb-4">
-                    <Badge
-                      variant="secondary"
-                      className={`text-xs text-navy`}
-                    >
+                    <Badge variant="secondary" className={`text-xs text-navy`}>
                       <Eye className="w-3 h-3 mr-1" />
                       {viewedVideos[video.id.videoId] ? 'Not viewed' : 'Viewed'}
                     </Badge>
diff --git a/src/app/(dashboard)/dashboard/_components/dashboard.tsx b/src/app/(dashboard)/dashboard/_components/dashboard.tsx
@@ -31,6 +31,7 @@ import VideoCard from './cards/VideoCard';
 import DiscussionWithAI from './discussion-with-ai';
 
 import type { FurtherInfo, Note, Output, ParsedVideoData, Question, VideoItem } from './interfaces';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 
 export const Dashboard = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -289,13 +290,16 @@ export const Dashboard = () => {
               </div>
             ) : (
               <Tabs defaultValue="summary" className="w-full">
-                <TabsList className="grid w-full grid-cols-5">
-                  <TabsTrigger value="summary">Summary</TabsTrigger>
-                  <TabsTrigger value="video">Video recommendation</TabsTrigger>
-                  <TabsTrigger value="qna">Q&A</TabsTrigger>
-                  <TabsTrigger value="further-info">Further Information</TabsTrigger>
-                  <TabsTrigger value="action-items">Action Items</TabsTrigger>
-                </TabsList>
+                <ScrollArea className="w-full">
+                  <TabsList className="inline-flex w-full min-w-max">
+                    <TabsTrigger value="summary">Summary</TabsTrigger>
+                    <TabsTrigger value="video">Video recommendation</TabsTrigger>
+                    <TabsTrigger value="qna">Q&A</TabsTrigger>
+                    <TabsTrigger value="further-info">Further Information</TabsTrigger>
+                    <TabsTrigger value="action-items">Action Items</TabsTrigger>
+                  </TabsList>
+                  <ScrollBar orientation={`horizontal`} />
+                </ScrollArea>
                 <TabsContent value="summary">
                   {summaryData && <SummaryCard summaryData={summaryData} />}
                 </TabsContent>
@@ -369,4 +373,4 @@ export const Dashboard = () => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;
diff --git a/src/app/(dashboard)/dashboard/_components/discussion-with-ai.tsx b/src/app/(dashboard)/dashboard/_components/discussion-with-ai.tsx
@@ -6,7 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import axios from 'axios';
-import { Bot, Send, User, Loader2, Copy, Check } from 'lucide-react';
+import { Bot, Check, Copy, Loader2, Send, User } from 'lucide-react';
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -26,7 +26,10 @@ interface DiscussionWithAIProps {
 
 const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
   const [input, setInput] = useState<string>('');
-  const [responses, setResponses, removeResponses] = useLocalStorage<Message[]>(`chat-responses-${learningid}`, []);
+  const [responses, setResponses, removeResponses] = useLocalStorage<Message[]>(
+    `chat-responses-${learningid}`,
+    [],
+  );
   const [chatSession, setChatSession] = useState<any>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [basicQuestions, setBasicQuestions] = useState<string[]>([]);
@@ -156,10 +159,11 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
                 className={`flex ${response.sender === 'user' ? 'justify-end' : 'justify-start'}`}
               >
                 <div
-                  className={`p-2 rounded-lg max-w-[80%] text-sm ${response.sender === 'user'
+                  className={`p-2 rounded-lg max-w-[80%] text-sm ${
+                    response.sender === 'user'
                       ? 'bg-primary dark:text-navy text-white'
                       : 'bg-secondary text-secondary-foreground'
-                    } relative group`}
+                  } relative group`}
                 >
                   {response.sender === 'user' ? (
                     <User className="inline-block mr-2 h-4 w-4" />
@@ -210,7 +214,9 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
                   </Button>
                 ))
               ) : (
-                <div className="text-sm text-muted-foreground">No suggested questions available.</div>
+                <div className="text-sm text-muted-foreground">
+                  No suggested questions available.
+                </div>
               )}
             </div>
           </ScrollArea>
@@ -244,4 +250,4 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
   );
 };
 
-export default DiscussionWithAI;
+export default DiscussionWithAI;
diff --git a/src/app/(dashboard)/notes/_components/NewNote.tsx b/src/app/(dashboard)/notes/_components/NewNote.tsx
@@ -212,11 +212,7 @@ export const NewNoteSection: React.FC<{
                   <FormItem>
                     <FormLabel>Title</FormLabel>
                     <FormControl>
-                      <Input
-                        {...field}
-                        placeholder="Title"
-                        className="w-full"
-                      />
+                      <Input {...field} placeholder="Title" className="w-full" />
                     </FormControl>
                   </FormItem>
                 )}
@@ -282,4 +278,4 @@ export const NewNoteSection: React.FC<{
       </Dialog>
     </div>
   );
-};
+};
diff --git a/src/app/(legal)/layout.tsx b/src/app/(legal)/layout.tsx
@@ -25,10 +25,11 @@ export default function LegalLayout({
       >
         <div className="container mx-auto px-4">
           <Link href="/" className="text-2xl font-bold">
-            <Image 
-              width={150} 
+            <Image
+              width={150}
               height={50}
-              src={`/assets/svgs/home/main-logo.svg`} alt="Home Logo" 
+              src={`/assets/svgs/home/main-logo.svg`}
+              alt="Home Logo"
             />
           </Link>
         </div>
diff --git a/src/app/HomeNavigation.tsx b/src/app/HomeNavigation.tsx
@@ -4,11 +4,11 @@ import { UserNav } from '@/components';
 import { Button } from '@/components/ui/button';
 import { createClient } from '@/utils/supabase/client';
 import type { User } from '@supabase/supabase-js';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useState, useEffect } from 'react';
 import { Menu, X } from 'lucide-react';
 import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
 export const HomeNavigation = () => {
   const [user, setUser] = useState<User | null>(null);
@@ -36,9 +36,9 @@ export const HomeNavigation = () => {
     { name: 'Home', path: '/' },
     ...(user
       ? [
-        { name: 'My Learning', path: '/my-learning' },
-        { name: 'Dashboard', path: '/dashboard' },
-      ]
+          { name: 'My Learning', path: '/my-learning' },
+          { name: 'Dashboard', path: '/dashboard' },
+        ]
       : []),
   ];
 
@@ -130,4 +130,4 @@ export const HomeNavigation = () => {
       )}
     </nav>
   );
-};
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
+import { Footer } from '@/components';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { HomeNavigation } from './HomeNavigation';
-import { Footer } from '@/components';
 
 export default function Home() {
   const router = useRouter();
diff --git a/src/components/custom/Footer.tsx b/src/components/custom/Footer.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import Link from 'next/link'
-import Image from 'next/image'
+import Image from 'next/image';
+import Link from 'next/link';
+import React from 'react';
 
 const Footer = () => {
   return (
@@ -30,7 +30,10 @@ const Footer = () => {
                   </Link>
                 </li>
                 <li>
-                  <Link href="/features" className="text-gray-600 hover:text-navy transition-colors">
+                  <Link
+                    href="/features"
+                    className="text-gray-600 hover:text-navy transition-colors"
+                  >
                     Features
                   </Link>
                 </li>
@@ -47,17 +50,26 @@ const Footer = () => {
             <nav>
               <ul className="space-y-2">
                 <li>
-                  <Link href="/legal/privacy" className="text-gray-600 hover:text-navy transition-colors">
+                  <Link
+                    href="/legal/privacy"
+                    className="text-gray-600 hover:text-navy transition-colors"
+                  >
                     Privacy Policy
                   </Link>
                 </li>
                 <li>
-                  <Link href="/legal/terms" className="text-gray-600 hover:text-navy transition-colors">
+                  <Link
+                    href="/legal/terms"
+                    className="text-gray-600 hover:text-navy transition-colors"
+                  >
                     Terms of Service
                   </Link>
                 </li>
                 <li>
-                  <Link href="/legal/cookies" className="text-gray-600 hover:text-navy transition-colors">
+                  <Link
+                    href="/legal/cookies"
+                    className="text-gray-600 hover:text-navy transition-colors"
+                  >
                     Cookie Policy
                   </Link>
                 </li>
@@ -73,7 +85,11 @@ const Footer = () => {
             <a href="#" className="text-gray-600 hover:text-navy transition-colors">
               <span className="sr-only">Facebook</span>
               <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
+                <path
+                  fillRule="evenodd"
+                  d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+                  clipRule="evenodd"
+                />
               </svg>
             </a>
             <a href="#" className="text-gray-600 hover:text-navy transition-colors">
@@ -85,14 +101,18 @@ const Footer = () => {
             <a href="#" className="text-gray-600 hover:text-navy transition-colors">
               <span className="sr-only">GitHub</span>
               <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                <path
+                  fillRule="evenodd"
+                  d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                  clipRule="evenodd"
+                />
               </svg>
             </a>
           </div>
         </div>
       </div>
     </footer>
-  )
-}
+  );
+};
 
-export { Footer }
+export { Footer };
diff --git a/src/components/custom/index.ts b/src/components/custom/index.ts
@@ -3,4 +3,4 @@ export * from './Video';
 export * from './AuthButton';
 export * from './LoadingDots';
 export * from './search-bar';
-export * from './Footer';
+export * from './Footer';
