style: add containers globally #96

apps/lms/app/(course)/courses/[courseId]/chapters/[chapterId]/_components/video-player.tsx

@@ -69,7 +69,7 @@ export const VideoPlayer = ({
       {isLocked && (
         <div className="absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-brand/20 text-foreground">
           <LockClosedIcon className="h-8 w-8" />
-          <p className="text-sm">This chapter is locked</p>
+          <p className="text-sm">Please enroll to enjoy this course.</p>
         </div>
       )}
       {!isLocked && (

apps/lms/app/(course)/courses/[courseId]/chapters/[chapterId]/page.tsx

@@ -5,6 +5,7 @@ import { redirect } from 'next/navigation';
 
 import { getChapter } from '@/actions/get-chapter';
 import { Banner } from '@/components/banner';
+import { Container } from '@/components/container';
 import { Preview } from '@/components/preview';
 
 import { CourseEnrollButton } from './_components/course-enroll-button';
@@ -45,82 +46,84 @@ const ChapterIdPage = async ({
 
   return (
     <div>
-      <div className="mx-auto flex max-w-4xl flex-col pb-20">
-        {userProgress?.isCompleted && (
-          <Banner
-            variant="success"
-            label="You already completed this chapter."
-          />
-        )}
-        {isLocked && (
-          <Banner
-            variant="warning"
-            label="You need to purchase this course to watch this chapter."
-          />
-        )}
-        <div className="p-4">
-          <VideoPlayer
-            chapterId={params.chapterId}
-            title={chapter.title}
-            courseId={params.courseId}
-            nextChapterId={nextChapter?.id}
-            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-            playbackId={muxData?.playbackId!}
-            isLocked={isLocked}
-            completeOnEnd={completeOnEnd}
-          />
-        </div>
-        <div className="rounded-xl bg-white p-6 dark:bg-background lg:p-8">
-          <div className="flex flex-col items-center justify-between p-4 md:flex-row">
-            <h2 className="mb-2 flex-grow font-display text-lg">
-              {chapter.title}
-            </h2>
-            {purchase ? (
-              <CourseProgressButton
-                chapterId={params.chapterId}
-                courseId={params.courseId}
-                nextChapterId={nextChapter?.id}
-                isCompleted={!!userProgress?.isCompleted}
-              />
-            ) : (
-              <CourseEnrollButton
-                courseId={params.courseId}
-                price={course.price!}
-              />
-            )}
+      <Container>
+        <div className="mx-auto flex flex-col pb-20">
+          {userProgress?.isCompleted && (
+            <Banner
+              variant="success"
+              label="You already completed this chapter."
+            />
+          )}
+          {isLocked && (
+            <Banner
+              variant="warning"
+              label="You need to purchase this course to watch this chapter."
+            />
+          )}
+          <div className="p-4">
+            <VideoPlayer
+              chapterId={params.chapterId}
+              title={chapter.title}
+              courseId={params.courseId}
+              nextChapterId={nextChapter?.id}
+              // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+              playbackId={muxData?.playbackId!}
+              isLocked={isLocked}
+              completeOnEnd={completeOnEnd}
+            />
           </div>
-          <Separator />
-          <div>
-            <Preview value={chapter.description!} />
+          <div className="rounded-xl bg-white p-6 dark:bg-background lg:p-8">
+            <div className="flex flex-col items-center justify-between p-4 md:flex-row">
+              <h2 className="mb-2 flex-grow font-display text-lg">
+                {chapter.title}
+              </h2>
+              {purchase ? (
+                <CourseProgressButton
+                  chapterId={params.chapterId}
+                  courseId={params.courseId}
+                  nextChapterId={nextChapter?.id}
+                  isCompleted={!!userProgress?.isCompleted}
+                />
+              ) : (
+                <CourseEnrollButton
+                  courseId={params.courseId}
+                  price={course.price!}
+                />
+              )}
+            </div>
+            <Separator />
+            <div>
+              <Preview value={chapter.description!} />
+            </div>
+            {!!attachments.length && (
+              <>
+                <Separator />
+                <div className="p-4">
+                  {attachments.length > 0 && (
+                    <div className="mt-16 flex items-center gap-x-2">
+                      <h2 className="font-display text-lg">
+                        Resources & Attachments
+                      </h2>
+                    </div>
+                  )}
+                  {attachments.map((attachment) => (
+                    <a
+                      href={attachment.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      key={attachment.id}
+                      className="mt-8 flex w-full items-center rounded-md border p-3 text-foreground hover:underline"
+                    >
+                      <FileIcon />
+                      <p className="ml-2 line-clamp-1">{attachment.name}</p>
+                    </a>
+                  ))}
+                </div>
+              </>
+            )}
           </div>
-          {!!attachments.length && (
-            <>
-              <Separator />
-              <div className="p-4">
-                {attachments.length > 0 && (
-                  <div className="mt-16 flex items-center gap-x-2">
-                    <h2 className="font-display text-lg">
-                      Resources & Attachments
-                    </h2>
-                  </div>
-                )}
-                {attachments.map((attachment) => (
-                  <a
-                    href={attachment.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    key={attachment.id}
-                    className="mt-8 flex w-full items-center rounded-md border p-3 text-foreground hover:underline"
-                  >
-                    <FileIcon />
-                    <p className="ml-2 line-clamp-1">{attachment.name}</p>
-                  </a>
-                ))}
-              </div>
-            </>
-          )}
         </div>
-      </div>
+      </Container>
     </div>
   );
 };

apps/lms/app/(dashboard)/(routes)/(root)/page.tsx

@@ -3,6 +3,7 @@ import { CheckCircledIcon, ClockIcon } from '@ui/index';
 import { redirect } from 'next/navigation';
 
 import { getDashboardCourses } from '@/actions/get-dashboard-courses';
+import { Container } from '@/components/container';
 import { CoursesList } from '@/components/courses-list';
 
 import { InfoCard } from './_components/info-card';
@@ -18,21 +19,23 @@ export default async function Dashboard() {
     await getDashboardCourses(userId);
 
   return (
-    <div className="space-y-8 p-6">
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <InfoCard
-          icon={ClockIcon}
-          label="In Progress"
-          numberOfItems={coursesInProgress.length}
-        />
-        <InfoCard
-          icon={CheckCircledIcon}
-          label="Completed"
-          numberOfItems={completedCourses.length}
-          variant="default"
-        />
+    <Container>
+      <div className="space-y-8 p-6">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <InfoCard
+            icon={ClockIcon}
+            label="In Progress"
+            numberOfItems={coursesInProgress.length}
+          />
+          <InfoCard
+            icon={CheckCircledIcon}
+            label="Completed"
+            numberOfItems={completedCourses.length}
+            variant="default"
+          />
+        </div>
+        <CoursesList items={[...coursesInProgress, ...completedCourses]} />
       </div>
-      <CoursesList items={[...coursesInProgress, ...completedCourses]} />
-    </div>
+    </Container>
   );
 }

apps/lms/app/(dashboard)/(routes)/search/page.tsx

@@ -35,10 +35,10 @@ const SearchPage = async ({ searchParams }: SearchPageProps) => {
 
   return (
     <>
-      <div className="block px-6 pt-6 md:mb-0 md:hidden">
+      <div className="block px-6 pt-6 md:mb-0 md:hidden lg:px-8">
         <SearchInput />
       </div>
-      <div className="space-y-8 p-6">
+      <div className="space-y-8 p-6 lg:p-8">
         <Categories items={categories} />
         <CoursesList items={courses} />
       </div>

apps/lms/app/(dashboard)/(routes)/teacher/analytics/_components/chart.tsx

@@ -29,7 +29,7 @@ export const Chart = ({ data }: ChartProps) => {
             axisLine={false}
             tickFormatter={(value) => `$${value}`}
           />
-          <Bar dataKey="total" fill="#0369a1" radius={[4, 4, 0, 0]} />
+          <Bar dataKey="total" fill="#6847c2" radius={[4, 4, 0, 0]} />
         </BarChart>
       </ResponsiveContainer>
     </Card>

apps/lms/app/(dashboard)/(routes)/teacher/analytics/page.tsx

@@ -2,6 +2,7 @@ import { auth } from '@clerk/nextjs';
 import { redirect } from 'next/navigation';
 
 import { getAnalytics } from '@/actions/get-analytics';
+import { Container } from '@/components/container';
 
 import { Chart } from './_components/chart';
 import { DataCard } from './_components/data-card';
@@ -16,13 +17,15 @@ const AnalyticsPage = async () => {
   const { data, totalRevenue, totalSales } = await getAnalytics(userId);
 
   return (
-    <div className="p-6">
-      <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-        <DataCard label="Total Revenue" value={totalRevenue} shouldFormat />
-        <DataCard label="Total Sales" value={totalSales} />
+    <Container>
+      <div className="p-6">
+        <div className="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+          <DataCard label="Total Revenue" value={totalRevenue} shouldFormat />
+          <DataCard label="Total Sales" value={totalSales} />
+        </div>
+        <Chart data={data} />
       </div>
-      <Chart data={data} />
-    </div>
+    </Container>
   );
 };
 

apps/lms/app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/chapters-list.tsx

@@ -101,7 +101,7 @@ export const ChaptersList = ({
                       )}
                       <Badge
                         className={cn(
-                          'border bg-transparent text-muted-foreground',
+                          'pointer-events-none border border-border bg-transparent text-muted-foreground',
                           chapter.isPublished &&
                             'pointer-events-none border-brand bg-transparent text-brand',
                         )}

apps/lms/app/(dashboard)/(routes)/teacher/courses/page.tsx

@@ -1,6 +1,7 @@
 import { auth } from '@clerk/nextjs';
 import { redirect } from 'next/navigation';
 
+import { Container } from '@/components/container';
 import { db } from '@/lib/db';
 
 import { columns } from './_components/columns';
@@ -23,9 +24,9 @@ const CoursesPage = async () => {
   });
 
   return (
-    <div className="p-6">
+    <Container className="py-12">
       <DataTable columns={columns} data={courses} />
-    </div>
+    </Container>
   );
 };
 

apps/lms/app/(dashboard)/(routes)/teacher/create/page.tsx

@@ -48,7 +48,7 @@ const CreatePage = () => {
   };
 
   return (
-    <div className="mx-auto mt-24 flex rounded-xl border bg-white p-6 shadow-md dark:bg-background md:mt-32 md:max-w-4xl md:justify-center md:p-12">
+    <div className="mx-auto mt-24 flex rounded-xl border bg-white p-6 shadow-md dark:bg-background md:mt-32 md:max-w-3xl md:justify-center md:p-12">
       <div>
         <H3 as="h1">Course title</H3>
         <p className="text-base text-muted-foreground">

apps/lms/components/container.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import { ElementType, ReactNode } from 'react';
+
+interface ContainerProps {
+  as?: ElementType;
+  className?: string;
+  children?: ReactNode;
+}
+
+export function Container({
+  as: Component = 'div',
+  className,
+  children,
+}: ContainerProps) {
+  return (
+    <Component
+      className={clsx('mx-auto max-w-5xl px-6 lg:px-8 xl:px-10', className)}
+    >
+      <div className="mx-auto max-w-2xl lg:max-w-none">{children}</div>
+    </Component>
+  );
+}

apps/lms/components/course-card.tsx

@@ -9,6 +9,7 @@ import { formatPrice } from '@/lib/format';
 interface CourseCardProps {
   id: string;
   title: string;
+  description: string;
   imageUrl: string;
   chaptersLength: number;
   price: number;
@@ -19,6 +20,7 @@ interface CourseCardProps {
 export const CourseCard = ({
   id,
   title,
+  description,
   imageUrl,
   chaptersLength,
   price,
@@ -41,17 +43,20 @@ export const CourseCard = ({
               </span>
             </div>
           </div>
-          <div className="line-clamp-2 font-display text-lg leading-6 transition group-hover:text-brand md:h-12">
+          <div className="line-clamp-2 font-display text-lg leading-6 transition group-hover:text-brand md:h-14">
             {title}
           </div>
+          <p className="my-2 line-clamp-2 text-muted-foreground">
+            {description}
+          </p>
           {progress !== null ? (
             <CourseProgress
               variant={progress === 100 ? 'success' : 'default'}
               size="sm"
               value={progress}
             />
           ) : (
-            <p className="text-md mt-2 font-display text-brand">
+            <p className="my-2 max-w-[60px] rounded-md bg-brand px-2 text-center text-base font-semibold text-foreground">
               {formatPrice(price) === '$0' ? 'Free' : formatPrice(price)}
             </p>
           )}

apps/lms/components/courses-list.tsx

@@ -21,6 +21,7 @@ export const CoursesList = ({ items }: CoursesListProps) => {
             key={item.id}
             id={item.id}
             title={item.title}
+            description={item.description!}
             imageUrl={item.imageUrl!}
             chaptersLength={item.chapters.length}
             price={item.price!}