-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
21a476e
commit cc9c5d8
Showing
12 changed files
with
242 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { TableCell, TableRow } from '~/components/ui'; | ||
| import { Skeleton } from '~/components/ui/skeleton'; | ||
|
|
||
| const CurriculaSkeleton = () => { | ||
| return ( | ||
| <> | ||
| <TableRow> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[40px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[200px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[250px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[40px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[20px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="mx-auto h-4 w-[20px]" /> | ||
| </TableCell> | ||
| </TableRow> | ||
| </> | ||
| ); | ||
| }; | ||
| export default CurriculaSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { FaPhone } from 'react-icons/fa'; | ||
| import { MdEmail } from 'react-icons/md'; | ||
|
|
||
| import { Skeleton } from '../ui/skeleton'; | ||
|
|
||
| const DepartmentCardSkeleton = () => { | ||
| return ( | ||
| <li className="rounded border border-primary-700 bg-neutral-50 hover:drop-shadow-md"> | ||
| <section className="flex gap-4 p-2 sm:p-3 md:p-4"> | ||
| <Skeleton className="size-32 rounded lg:size-36 xl:size-40 2xl:size-44" /> | ||
| <main> | ||
| <header className="mb-1 sm:mb-2 md:mb-3 lg:mb-4"> | ||
| <h4> | ||
| <Skeleton className="h-5 w-[175px] lg:h-6 lg:w-[350px]" /> | ||
| </h4> | ||
| <p> | ||
| <Skeleton className="h-3 w-[150px] lg:h-4 lg:w-[250px]" /> | ||
| </p> | ||
| </header> | ||
|
|
||
| <ul className="mt-7"> | ||
| <li className="flex items-center gap-3"> | ||
| <MdEmail className="fill-primary-700" /> | ||
| <Skeleton className="h-4 w-[150px]" /> | ||
| </li> | ||
| <li className="flex items-center gap-3 space-y-3"> | ||
| <FaPhone className="scale-x-[-1] fill-primary-700" /> | ||
| <Skeleton className="h-4 w-[150px]" /> | ||
| </li> | ||
| </ul> | ||
| </main> | ||
| </section> | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export default DepartmentCardSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Skeleton } from '../ui/skeleton'; | ||
|
|
||
| const DepartmentNameSkeleton = () => { | ||
| return ( | ||
| <section className="space-y-5"> | ||
| <Skeleton className="h-3 w-[300px]" /> | ||
| <Skeleton className="h-3 w-[300px]" /> | ||
| <Skeleton className="h-3 w-[250px]" /> | ||
| <Skeleton className="h-3 w-[200px]" /> | ||
| <Skeleton className="h-3 w-[275px]" /> | ||
| <Skeleton className="h-3 w-[200px]" /> | ||
| <Skeleton className="h-3 w-[225px]" /> | ||
| <Skeleton className="h-3 w-[150px]" /> | ||
| <Skeleton className="h-3 w-[300px]" /> | ||
| <Skeleton className="h-3 w-[300px]" /> | ||
| <Skeleton className="h-3 w-[250px]" /> | ||
| <Skeleton className="h-3 w-[200px]" /> | ||
| <Skeleton className="h-3 w-[275px]" /> | ||
| <Skeleton className="h-3 w-[200px]" /> | ||
| <Skeleton className="h-3 w-[225px]" /> | ||
| <Skeleton className="h-3 w-[150px]" /> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default DepartmentNameSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { TableCell, TableRow } from '~/components/ui'; | ||
| import { Skeleton } from '~/components/ui/skeleton'; | ||
|
|
||
| const MeetingsSkeleton = () => { | ||
| return ( | ||
| <> | ||
| <TableRow> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[30px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[150px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="h-4 w-[400px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="mx-auto h-4 w-[20px]" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="mx-auto h-4 w-[20px]" /> | ||
| </TableCell> | ||
| </TableRow> | ||
| </> | ||
| ); | ||
| }; | ||
| export default MeetingsSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { MdOutlineKeyboardArrowRight } from 'react-icons/md'; | ||
|
|
||
| import { Skeleton } from '../ui/skeleton'; | ||
|
|
||
| export const NotificationSkeleton = ({ count }: { count: number }) => { | ||
| return ( | ||
| <li className="mt-1"> | ||
| <h5 className="text-primary-700"> | ||
| <Skeleton className="h-5 w-[125px] bg-neutral-400" /> | ||
| </h5> | ||
| <ul className="my-1 py-2 sm:py-4 md:py-6"> | ||
| {[...Array<number>(count)].map((_, index) => ( | ||
| <li className="inline-flex items-center" key={index}> | ||
| <MdOutlineKeyboardArrowRight className="my-auto size-4 text-primary-700 lg:size-6" /> | ||
| <Skeleton className="h-3 w-[450px] bg-neutral-400 lg:h-4 lg:w-[650px]" /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| <hr className="opacity-20" /> | ||
| </li> | ||
| ); | ||
| }; |
33 changes: 33 additions & 0 deletions
33
components/skeletons/studentactivity-carousel-skeleton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { cn } from '~/lib/utils'; | ||
|
|
||
| import { GalleryCarousel } from '../carousels/gallery'; | ||
| import { Card, CardDescription, CardTitle } from '../ui'; | ||
| import { Skeleton } from '../ui/skeleton'; | ||
|
|
||
| const StudentActivityCarouselSkeleton = () => { | ||
| return ( | ||
| <GalleryCarousel> | ||
| {Array.from({ length: 6 }).map((_, index) => ( | ||
| <Card | ||
| className="mx-auto flex aspect-square size-48 flex-col p-3 drop-shadow hover:drop-shadow-xl sm:size-56 md:size-64" | ||
| key={index} | ||
| > | ||
| <CardTitle | ||
| className={cn( | ||
| 'flex items-center justify-center gap-2 text-neutral-900', | ||
| 'text-lg sm:text-xl md:text-2xl' | ||
| )} | ||
| > | ||
| <Skeleton className="aspect-square size-6 rounded-md sm:size-7 md:size-8" /> | ||
| <Skeleton className="h-6 w-[300px] sm:h-7 md:h-8" /> | ||
| </CardTitle> | ||
| <CardDescription className="grow"> | ||
| <Skeleton className="size-full rounded-md object-cover" /> | ||
| </CardDescription> | ||
| </Card> | ||
| ))} | ||
| </GalleryCarousel> | ||
| ); | ||
| }; | ||
|
|
||
| export default StudentActivityCarouselSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,15 @@ | ||
| import { cn } from "~/lib/utils" | ||
| import { cn } from '~/lib/utils'; | ||
|
|
||
| function Skeleton({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) { | ||
| return ( | ||
| <div | ||
| className={cn("animate-pulse rounded-md bg-gray-100 dark:bg-gray-800", className)} | ||
| className={cn('animate-pulse rounded-md bg-neutral-200', className)} | ||
| {...props} | ||
| /> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export { Skeleton } | ||
| export { Skeleton }; |