diff --git a/app/[locale]/academics/curricula/page.tsx b/app/[locale]/academics/curricula/page.tsx index 6fc2805c..e15b88fa 100644 --- a/app/[locale]/academics/curricula/page.tsx +++ b/app/[locale]/academics/curricula/page.tsx @@ -5,8 +5,8 @@ import { FaExternalLinkAlt } from 'react-icons/fa'; import { Button } from '~/components/buttons'; import Heading from '~/components/heading'; -import Loading from '~/components/loading'; import { PaginationWithLogic } from '~/components/pagination'; +import { CurriculaSkeleton } from '~/components/skeletons'; import { Table, TableBody, @@ -43,25 +43,25 @@ export default async function Curricula({ {/* FIXME: Add input and filters here */} - + {/* FIXME: Make Tables mobile friendly by adding horizontal scrolling*/}
- }> - - - - {text.code} - {text.title} - {text.major} - {text.credits} - {text.totalCredits} - {text.syllabus} - - - +
+ + + {text.code} + {text.title} + {text.major} + {text.credits} + {text.totalCredits} + {text.syllabus} + + + + }> - -
- + + + - }> + }> @@ -59,7 +63,12 @@ export default async function FacultyAndStaff({
    - } key={`${query}-${departmentName}`}> + ( + + ))} + key={`${query}-${departmentName}`} + > - }> - - - - {text.members.serial} - {type === 'governor' && ( - {text.members.nomination} - )} - {text.members.name} - {text.members.servingAs} - - - - - -
    -     + + + + {text.members.serial} + {type === 'governor' && ( + {text.members.nomination} + )} + {text.members.name} + {text.members.servingAs} + + + + + + +
    - }> - - - - {text.meetings.serial} - {text.meetings.date} - {text.meetings.place} - - {text.meetings.agenda} - - - {text.meetings.minutes} - - - - +
    + + + {text.meetings.serial} + {text.meetings.date} + {text.meetings.place} + + {text.meetings.agenda} + + + {text.meetings.minutes} + + + + + + ( + + ))} + key={meetingPage} + > - -
    -     +     + +
      - } key={currentCategory}> + ( + + ))} + key={currentCategory} + >
    diff --git a/app/[locale]/student-activities/page.tsx b/app/[locale]/student-activities/page.tsx index 5ebe4a4f..8b8d9cdd 100644 --- a/app/[locale]/student-activities/page.tsx +++ b/app/[locale]/student-activities/page.tsx @@ -6,7 +6,7 @@ import { BouncyArrowButton } from '~/components/buttons'; import { GalleryCarousel } from '~/components/carousels'; import Heading from '~/components/heading'; import ImageHeader from '~/components/image-header'; -import Loading from '~/components/loading'; +import { StudentActivityCarouselSkeleton } from '~/components/skeletons'; import { Card, CardDescription, CardTitle } from '~/components/ui'; import { getTranslations } from '~/i18n/translations'; import { cn } from '~/lib/utils'; @@ -43,7 +43,7 @@ export default async function StudentActivities({ />
    - }> + }> { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/components/skeletons/department-card.tsx b/components/skeletons/department-card.tsx new file mode 100644 index 00000000..d0a5ca24 --- /dev/null +++ b/components/skeletons/department-card.tsx @@ -0,0 +1,35 @@ +import { FaPhone } from 'react-icons/fa'; +import { MdEmail } from 'react-icons/md'; + +import { Skeleton } from '~/components/skeletons'; + +export const DepartmentCardSkeleton = () => { + return ( +
  1. +
    + +
    +
    +

    + +

    +

    + +

    +
    + +
      +
    • + + +
      • +
    • + + +
      • +
    +
    +
    +
    2. + ); +}; diff --git a/components/skeletons/department-name.tsx b/components/skeletons/department-name.tsx new file mode 100644 index 00000000..ef607de6 --- /dev/null +++ b/components/skeletons/department-name.tsx @@ -0,0 +1,24 @@ +import { Skeleton } from '~/components/skeletons'; + +export const DepartmentNameSkeleton = () => { + return ( +
    + + + + + + + + + + + + + + + + +
    + ); +}; diff --git a/components/skeletons/index.ts b/components/skeletons/index.ts new file mode 100644 index 00000000..f374dae3 --- /dev/null +++ b/components/skeletons/index.ts @@ -0,0 +1,7 @@ +export * from './curricula'; +export * from './department-card'; +export * from './department-name'; +export * from './meetings'; +export * from './notification'; +export * from './skeleton'; +export * from './student-activity-carousel'; diff --git a/components/skeletons/meetings.tsx b/components/skeletons/meetings.tsx new file mode 100644 index 00000000..cdb7043a --- /dev/null +++ b/components/skeletons/meetings.tsx @@ -0,0 +1,26 @@ +import { Skeleton } from '~/components/skeletons'; +import { TableCell, TableRow } from '~/components/ui'; + +export const MeetingsSkeleton = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/components/skeletons/notification.tsx b/components/skeletons/notification.tsx new file mode 100644 index 00000000..043ad84f --- /dev/null +++ b/components/skeletons/notification.tsx @@ -0,0 +1,22 @@ +import { MdOutlineKeyboardArrowRight } from 'react-icons/md'; + +import { Skeleton } from '~/components/skeletons'; + +export const NotificationSkeleton = ({ count }: { count: number }) => { + return ( +
  2. +
    + +
    +
      + {[...Array(count)].map((_, index) => ( +
    • + + +
      • + ))} +
    +
    +
    3. + ); +}; diff --git a/components/skeletons/skeleton.tsx b/components/skeletons/skeleton.tsx new file mode 100644 index 00000000..a05da5c0 --- /dev/null +++ b/components/skeletons/skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from '~/lib/utils'; + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
    + ); +} + +export { Skeleton }; diff --git a/components/skeletons/student-activity-carousel.tsx b/components/skeletons/student-activity-carousel.tsx new file mode 100644 index 00000000..696590eb --- /dev/null +++ b/components/skeletons/student-activity-carousel.tsx @@ -0,0 +1,30 @@ +import { GalleryCarousel } from '~/components/carousels'; +import { Skeleton } from '~/components/skeletons'; +import { Card, CardDescription, CardTitle } from '~/components/ui'; +import { cn } from '~/lib/utils'; + +export const StudentActivityCarouselSkeleton = () => { + return ( + + {Array.from({ length: 6 }).map((_, index) => ( + + + + + + + + + + ))} + + ); +};