) => {
54 | if (e.key === "Enter") {
55 | e.preventDefault();
56 | const search = form.getValues("search");
57 | router.push(`/courses?search=${encodeURIComponent(search)}`);
58 | }
59 | };
60 |
61 | return (
62 |
8 |
9 |
10 |
Courses
11 |
12 | (Choose your course and dive into career)
13 |
14 |
15 |
16 |
17 |
18 | {user.map((_, index) => (
19 |
23 |
24 |
25 |
28 |
29 | ))}
30 |
31 |
11 |
12 |
13 |
Courses
14 |
15 | (Choose your course and dive into career)
16 |
17 |
18 |
19 |
21 |
22 |
23 |
25 |
26 |
48 |
{course.title}
49 |
50 |
51 | {chapters}
53 |
54 |
55 | {!visitedUser &&
56 | (isCourseAccessableByTheUser ? (
57 |
58 | ) : (
59 |
60 | ))}
61 |
62 | {isCourseAccessableByTheUser &&
}
63 |
64 |
68 | by {course.user.name}
69 |
70 |
71 |
8 |
9 |
10 |
Courses
11 |
12 | (View your registered courses)
13 |
14 |
15 |
16 |
17 | {user.map((access) => (
18 |
22 |
23 |
24 |
27 |
28 | ))}
29 |
30 |
15 | Sign in to view your courses
16 |
17 |
19 |
20 | );
21 |
22 | const user = await prisma.user.findUnique({
23 | where: {
24 | authId: userId,
25 | },
26 | include: {
27 | accesses: {
28 | include: {
29 | course: {
30 | include: {
31 | _count: {
32 | select: {
33 | chapters: {
34 | where: {
35 | isPublished: true,
36 | },
37 | },
38 | },
39 | },
40 | user: true,
41 | },
42 | },
43 | },
44 | },
45 | },
46 | });
47 | if (!user) redirect("/not-authorized");
48 | return (
49 |
50 |
51 |
52 |
Courses
53 |
54 | (Here are your registered courses)
55 |
56 |
57 |
58 | {
59 | // If user has no courses
60 | user.accesses.length === 0 && (
61 |
62 |
63 | You have not registered for any courses yet.
64 |
65 |
66 |
Browse Courses
67 |
68 |
69 | )
70 | }
71 |
72 | {user.accesses.map((access) => (
73 |
80 |
32 | {children}
33 |
34 | );
35 | };
36 |
37 | export default layout;
38 |
39 | //
40 | //
41 | //
42 | //
43 | //
45 | // {children}
46 | //
47 | //
7 |
8 | {/* Left Column */}
9 |
10 |
11 | {/* Right Column */}
12 |
13 |
16 |
17 |
15 |
Course not found
16 |
47 |
Course not found
48 |
80 |
87 | );
88 | };
89 |
90 | export default Page;
91 |
--------------------------------------------------------------------------------
/src/app/(common)/profile/[profileId]/loading.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
3 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
4 | import { Skeleton } from "@/components/ui/skeleton";
5 |
6 | const loading = () => {
7 | return (
8 |
9 |
10 |
11 |
12 |
14 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
29 |
30 |
31 | {[1, 2, 3].map((i) => (
32 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
44 |
45 |
46 | {[1, 2, 3].map((i) => (
47 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
59 |
60 |
61 | {[1, 2, 3].map((i) => (
62 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
74 |
75 |
76 | {[1, 2, 3].map((i) => (
77 |
80 |
81 |
82 |
83 |
84 |
9 |
10 |
11 |
12 |
14 |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
29 |
30 |
31 | {[1, 2, 3].map((i) => (
32 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
44 |
45 |
46 | {[1, 2, 3].map((i) => (
47 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
59 |
60 |
61 | {[1, 2, 3].map((i) => (
62 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
74 |
75 |
76 | {[1, 2, 3].map((i) => (
77 |
80 |
81 |
82 |
83 |
84 |
9 |
10 |
11 |
Settings
12 |
13 | (Manage your account settings)
14 |
15 |
16 |
17 |
18 |
19 | {settings.map((_, index) => (
20 |
23 |
24 | {settings.map((_, index) => (
25 |
31 |
32 |
14 | Sign in to view your settings
15 |
16 |
18 |
19 | );
20 |
21 | const user = await prisma.user.findUnique({
22 | where: {
23 | authId: userId,
24 | },
25 | });
26 | if (!user) redirect("/not-authorized");
27 |
28 | return (
29 |
30 |
31 |
32 |
Settings
33 |
34 | (Manage your account settings)
35 |
36 |
37 |
38 |
39 |
6 | {children}
7 |
8 | );
9 | };
10 |
11 | export default layout;
12 |
--------------------------------------------------------------------------------
/src/app/auth/sign-in/[[...sign-in]]/page.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from "@/components/ui/skeleton";
2 | import { SignIn, ClerkLoading } from "@clerk/nextjs";
3 |
4 | export default function Page() {
5 | return (
6 | <>
7 |
8 |
10 |
8 |
10 |
7 | {/* Left Part Skeleton */}
8 |
9 |
10 |
11 |
14 |
15 | {[...Array(8)].map((_, index) => (
16 |
19 |
20 |
21 |
22 | {/* Right Part Skeleton */}
23 |
24 |
25 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
40 |
41 |
42 |
25 |
Course not found
26 |
27 | );
28 | }
29 |
30 | const { isCourseAccessableByTheUser, visitedUser, isauther } =
31 | await courseAccess(courseId);
32 |
33 | return (
34 |
35 |
36 |
42 |
43 |
44 |
45 |
46 |
52 |
53 |
55 |
56 |
62 |
63 |
46 |
56 | {isCompleted ? (
57 |
58 | ) : isAccessable ? (
59 |
60 | ) : isFree ? (
61 |
62 | ) : (
63 |
64 | )}
65 |
{title}
66 |
68 | ) : (
69 |
79 | {isCompleted ? (
80 |
81 | ) : isAccessable ? (
82 |
83 | ) : isFree ? (
84 |
85 | ) : (
86 |
87 | )}
88 |
{title}
89 |
38 |
39 |
40 |
43 |
44 | {[...Array(8)].map((_, index) => (
45 |
48 |
49 |
55 |
56 |
{course?.title}
57 |
64 |
65 |
66 | {course?.chapters.map((chapter) => {
67 | const isCompleted = progressWithIds.includes(chapter.id);
68 | return (
69 |
83 |
18 |
19 |
21 |
22 |
29 |
30 | );
31 | };
32 |
33 | export default MobileLeftPart;
34 |
--------------------------------------------------------------------------------
/src/app/course/_components/VideoPlayer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Course } from "@prisma/client";
4 | import { useEffect, useState } from "react";
5 | import { Player } from "video-react";
6 | import { getCourse } from "../action";
7 | // import Video from 'next-video';
8 |
9 | interface VideoPlayerProps {
10 | videoUrl: string;
11 | courseId: string;
12 | }
13 | const VideoPlayer = ({ videoUrl, courseId }: VideoPlayerProps) => {
14 | const [courseDetails, setCourseDetails] = useState(null);
15 | useEffect(() => {
16 | const getCourseDeatils = async () => {
17 | const course = await getCourse(courseId);
18 | setCourseDetails(course);
19 | };
20 | getCourseDeatils();
21 | }, [videoUrl]);
22 | const nextVideo = async () => {};
23 | return (
24 | {
35 | // alert("Video ended");
36 | // }}
37 | // />
38 | // >;
108 | export type fullChapterType = Awaited>;
109 |
--------------------------------------------------------------------------------
/src/app/custom.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevKrishnasai/lms/0833f4a49292910e5c459ddcc38b9aa3254e31c4/src/app/custom.css
--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DevKrishnasai/lms/0833f4a49292910e5c459ddcc38b9aa3254e31c4/src/app/favicon.ico
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import { ClerkProvider, ClerkLoaded, ClerkLoading } from "@clerk/nextjs";
4 | import { ThemeProvider } from "@/providers/theme-provider";
5 | import ToastProvider from "@/providers/toast-provider";
6 | import { ContextProvider } from "@/providers/context-provider";
7 | import Loading from "@/components/Loading";
8 | import "./globals.css";
9 | import "@uploadthing/react/styles.css";
10 | import NextTopLoader from "nextjs-toploader";
11 |
12 | const inter = Inter({ subsets: ["latin"] });
13 |
29 |
30 |
31 |
33 |
39 | {/*
40 | */}
42 | {/* {children} */}
43 | {children}
44 |
46 |
47 |
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./custom.css";
3 | import Link from "next/link";
4 | //
5 | //
6 | //
7 | //
8 | //
9 | //
10 | //
404
11 | //
12 |
13 | //
14 | //
Look like you're lost
15 |
16 | //
the page you are looking for not avaible!
17 |
18 | //
19 | // Go to Home
20 | //
21 | //
22 | //
23 | //
24 | //
25 | //
27 |
28 | const NotFound = () => {
29 | return (
30 |
31 | Error 404. The page does not exist
32 |
33 | Sorry! The page you are looking for can not be found. Perhaps the page
34 | you requested was moved or deleted. It is also possible that you made a
35 | small typo when entering the address. Go to the main page.
36 |
37 |
38 |
42 |
43 |
44 |
45 |
46 | go home
47 |
48 |
50 | );
51 | };
52 |
53 | export default NotFound;
54 |
--------------------------------------------------------------------------------
/src/app/onboarding/actions.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 | import { prisma } from "@/lib/db";
3 | import { auth } from "@clerk/nextjs/server";
4 | import { Role } from "@prisma/client";
5 | import { render } from "@react-email/render";
6 | import { redirect } from "next/navigation";
7 | import nodemailer from "nodemailer";
8 | import WelcomeToLMS from "../../../emails/WelcomeToLMS";
9 |
10 | export const updateOnboarding = async (data: {
11 | selectedCategories: string[];
12 | selectedGoals: string[];
13 | bio: string;
14 | role: Role;
15 | }) => {
16 | const { userId } = auth();
17 | if (!userId) {
18 | redirect("/");
19 | }
20 |
21 | const user = await prisma.user.update({
22 | where: {
23 | authId: userId,
24 | },
25 | data: {
26 | onBoarded: true,
27 | bio: data.bio,
28 | role: data.role,
29 | },
30 | });
31 |
32 | const categories = await prisma.category.findMany({
33 | where: {
34 | title: {
35 | in: data.selectedCategories,
36 | },
37 | },
38 | select: { id: true, title: true },
39 | });
40 |
41 | await prisma.userCategory.createMany({
42 | data: categories.map((category) => ({
43 | userId: user.id,
44 | categoryId: category.id,
45 | })),
46 | skipDuplicates: true,
47 | });
48 |
49 | const goals = await prisma.goal.findMany({
50 | where: {
51 | title: {
52 | in: data.selectedGoals,
53 | },
54 | },
55 | select: { id: true, title: true },
56 | });
57 |
58 | await prisma.userGoal.createMany({
59 | data: goals.map((goal) => ({
60 | userId: user.id,
61 | goalId: goal.id,
62 | })),
63 | skipDuplicates: true,
64 | });
65 |
66 | const transport = nodemailer.createTransport({
67 | service: "Gmail",
68 | host: "smtp.gmail.com",
69 | port: 465,
70 | secure: true,
71 | auth: {
72 | user: process.env.MAIL_USER,
73 | pass: process.env.MAIL_PASS,
74 | },
75 | });
76 |
77 | const mailOptions = {
78 | from: process.env.MAIL_USER,
79 | to: user.email,
80 | subject: "Welcome To YourLMS Portal",
81 | html: render(
82 | WelcomeToLMS({
83 | name: user?.name || user.email.split("@")[0],
84 | role: user.role,
85 | })
86 | ),
87 | };
88 |
89 | transport.sendMail(mailOptions, function (error, info) {
90 | if (error) {
91 | console.log(error);
92 | throw new Error("Error sending email");
93 | }
94 | });
95 | };
96 |
--------------------------------------------------------------------------------
/src/app/onboarding/loading.tsx:
--------------------------------------------------------------------------------
1 | import { Skeleton } from "@/components/ui/skeleton";
2 | import React from "react";
3 |
4 | const loading = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {[1, 2, 3, 4, 5, 7, 8, 9].map((goal) => (
14 |
15 |
17 | ))}
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | {[1, 2, 3, 4, 5, 7, 8, 9].map((goal) => (
26 |
27 |
29 | ))}
30 |
31 |
32 |
33 |
34 |
68 |
69 |
70 | Welcome to YourLMS, {user?.firstName}!
71 |
72 |
73 | Let's personalize your learning journey. Tell us a bit about
74 | yourself and your goals.
75 |
76 |
77 |
83 |
84 |
= ({ content, onChange }) => {
13 | const { quill, quillRef } = useQuill();
14 | const [isInitialized, setIsInitialized] = useState(false);
15 |
16 | const { startUpload } = useUploadThing("uploadThumbnail", {
17 | skipPolling: true,
18 | onUploadBegin: () => {
19 | toast.loading("uploading...", {
20 | id: "uploading-image",
21 | });
22 | },
23 | onClientUploadComplete: (res) => {
24 | toast.success("uploaded successfully", {
25 | id: "uploading-image",
26 | });
27 | },
28 | onUploadProgress(p) {
29 | toast.loading(`uploading ${p}%`, {
30 | id: "uploading-image",
31 | });
32 | },
33 | onUploadError: (error: Error) => {
34 | toast.error(error.message, {
35 | id: "uploading-image",
36 | });
37 | },
38 | });
39 |
40 | const insertToEditor = useCallback(
41 | (url: string) => {
42 | const range = quill?.getSelection();
43 | if (range && quill) {
44 | quill.insertEmbed(range.index, "image", url);
45 | }
46 | },
47 | [quill]
48 | );
49 |
50 | const saveToServer = useCallback(
51 | async (file: File) => {
52 | try {
53 | const data = await startUpload([file]);
54 | if (data && data[0]) {
55 | insertToEditor(data[0].url);
56 | }
57 | } catch (error) {
58 | console.error("Error uploading image:", error);
59 | }
60 | },
61 | [startUpload, insertToEditor]
62 | );
63 |
64 | const selectLocalImage = useCallback(() => {
65 | const input = document.createElement("input");
66 | input.setAttribute("type", "file");
67 | input.setAttribute("accept", "image/*");
68 | input.click();
69 | input.onchange = () => {
70 | const file = input.files?.[0];
71 | if (file) {
72 | saveToServer(file);
73 | }
74 | };
75 | }, [saveToServer]);
76 |
77 | useEffect(() => {
78 | if (quill && !isInitialized) {
79 | quill.root.innerHTML = content;
80 | setIsInitialized(true);
81 |
82 | quill.on("text-change", () => {
83 | onChange(quill.root.innerHTML);
84 | });
85 | //@ts-ignore
86 | quill.getModule("toolbar").addHandler("image", selectLocalImage);
87 | }
88 | }, [quill, content, onChange, selectLocalImage, isInitialized]);
89 |
90 | // Update content when it changes externally
91 | useEffect(() => {
92 | if (quill && isInitialized && content !== quill.root.innerHTML) {
93 | quill.root.innerHTML = content;
94 | }
95 | }, [quill, content, isInitialized]);
96 |
97 | return (
98 |
101 | );
102 | };
103 |
104 | export default Editor;
105 |
--------------------------------------------------------------------------------
/src/components/Fileupload.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ourFileRouter } from "@/app/api/uploadthing/core";
4 | import { UploadButton, UploadDropzone } from "@/lib/uploadthing";
5 | import { toast } from "sonner";
6 | import { ClientUploadedFileData } from "uploadthing/types";
7 | interface FileuploadProps {
8 | endpoint: keyof typeof ourFileRouter;
9 | onChange: (url: string, res?: ClientUploadedFileData[]) => void;
10 | }
11 | export default function Fileupload({ endpoint, onChange }: FileuploadProps) {
12 | return (
13 | {
15 | toast.loading("uploading...", {
16 | id: "uploading",
17 | });
18 | }}
19 | endpoint={endpoint}
20 | onClientUploadComplete={(res) => {
21 | onChange(res[0].url, res);
22 | toast.success("uploaded successfully", {
23 | id: "uploading",
24 | });
25 | }}
26 | onUploadError={(error: Error) => {
27 | toast.error(error.message, {
28 | id: "uploading",
29 | });
30 | }}
31 | />
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/GridPattern.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import AnimatedGridPattern from "@/components/magicui/animated-grid-pattern";
5 | import { ReactNode } from "react";
6 |
7 | const GridPattern = ({ children }: { children: ReactNode }) => {
8 | return (
9 |
10 | {children}
11 |
21 |
18 |
26 | );
27 | };
28 |
29 | export default GroupButtons;
30 |
--------------------------------------------------------------------------------
/src/components/Loading.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from "lucide-react";
2 | import React from "react";
3 |
4 | const Loading = () => {
5 | return (
6 |
7 |
9 | );
10 | };
11 |
12 | export default Loading;
13 |
--------------------------------------------------------------------------------
/src/components/MobileSideBar.tsx:
--------------------------------------------------------------------------------
1 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
2 | import { MenuIcon } from "lucide-react";
3 | import Sidebar from "./Sidebar";
4 |
5 | const MobileSideBar = () => {
6 | // useEffect(() => {
7 | // setOpen(false);
8 | // }, [path]);
9 |
10 | return (
11 |
12 |
13 |
15 |
16 |
18 |
19 | );
20 | };
21 |
22 | export default MobileSideBar;
23 |
--------------------------------------------------------------------------------
/src/components/NewCourseButton.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
3 | import CreateCourseForm from "./CreateCourseForm";
4 |
5 | export function NewCourseButton() {
6 | return (
7 |
8 |
9 | Add Course
10 |
11 |
12 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Preview.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import "react-quill/dist/quill.bubble.css";
3 | import ReactQuill from "react-quill";
4 | interface PreviewProps {
5 | content: string;
6 | }
7 | const Preview = ({ content }: PreviewProps) => {
8 | return
30 |
{item.icon}
31 |
32 | {item.label}
33 |
34 |
51 | // {item.icon}
52 | // {item.label}
53 | //
54 | //
55 |
--------------------------------------------------------------------------------
/src/components/Sliders.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import Marquee from "@/components/magicui/marquee";
3 |
4 | const reviews = [
5 | {
6 | name: "Jack",
7 | username: "@jack",
8 | body: "I've never seen anything like this before. It's amazing. I love it.",
9 | img: "https://avatar.vercel.sh/jack",
10 | },
11 | {
12 | name: "Jill",
13 | username: "@jill",
14 | body: "I don't know what to say. I'm speechless. This is amazing.",
15 | img: "https://avatar.vercel.sh/jill",
16 | },
17 | {
18 | name: "John",
19 | username: "@john",
20 | body: "I'm at a loss for words. This is amazing. I love it.",
21 | img: "https://avatar.vercel.sh/john",
22 | },
23 | {
24 | name: "Jane",
25 | username: "@jane",
26 | body: "I'm at a loss for words. This is amazing. I love it.",
27 | img: "https://avatar.vercel.sh/jane",
28 | },
29 | {
30 | name: "Jenny",
31 | username: "@jenny",
32 | body: "I'm at a loss for words. This is amazing. I love it.",
33 | img: "https://avatar.vercel.sh/jenny",
34 | },
35 | {
36 | name: "James",
37 | username: "@james",
38 | body: "I'm at a loss for words. This is amazing. I love it.",
39 | img: "https://avatar.vercel.sh/james",
40 | },
41 | ];
42 |
43 | const firstRow = reviews.slice(0, reviews.length / 2);
44 | const secondRow = reviews.slice(reviews.length / 2);
45 |
46 | const ReviewCard = ({
47 | img,
48 | name,
49 | username,
50 | body,
51 | }: {
52 | img: string;
53 | name: string;
54 | username: string;
55 | body: string;
56 | }) => {
57 | return (
58 |
67 |
68 |
69 |
70 |
71 | {name}
72 |
73 |
{username}
74 |
75 |
{body}
77 |
78 | );
79 | };
80 |
81 | export function Sliders() {
82 | return (
83 |
84 |
85 | {firstRow.map((review) => (
86 |
89 |
90 | {secondRow.map((review) => (
91 |
94 |
95 |
96 |
setTheme(theme === "dark" ? "light" : "dark")}
23 | >
24 | Toggle theme
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/magicui/animated-shiny-text.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, FC, ReactNode } from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | interface AnimatedShinyTextProps {
6 | children: ReactNode;
7 | className?: string;
8 | shimmerWidth?: number;
9 | }
10 |
11 | const AnimatedShinyText: FC = ({
12 | children,
13 | className,
14 | shimmerWidth = 100,
15 | }) => {
16 | return (
17 |
35 | {children}
36 |
37 | );
38 | };
39 |
40 | export default AnimatedShinyText;
41 |
--------------------------------------------------------------------------------
/src/components/magicui/gradual-spacing.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AnimatePresence, motion, Variants } from "framer-motion";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | interface GradualSpacingProps {
8 | text: string;
9 | duration?: number;
10 | delayMultiple?: number;
11 | framerProps?: Variants;
12 | className?: string;
13 | }
14 |
15 | export default function GradualSpacing({
16 | text,
17 | duration = 0.5,
18 | delayMultiple = 0.04,
19 | framerProps = {
20 | hidden: { opacity: 0, x: -20 },
21 | visible: { opacity: 1, x: 0 },
22 | },
23 | className,
24 | }: GradualSpacingProps) {
25 | return (
26 |
27 |
28 | {text.split("").map((char, i) => (
29 |
38 | {char === " " ? : char}
39 |
40 | ))}
41 |
42 |
33 | {letters.map((letter, i) => (
34 |
45 | {letter === " " ? : letter}
46 |
47 | ))}
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/magicui/magic-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | export interface MagicCardProps {
9 | children: React.ReactNode;
10 | className?: string;
11 | gradientSize?: number;
12 | gradientColor?: string;
13 | gradientOpacity?: number;
14 | }
15 |
16 | export function MagicCard({
17 | children,
18 | className = "",
19 | gradientSize = 200,
20 | gradientColor = "#262626",
21 | }: MagicCardProps) {
22 | const mouseX = useMotionValue(0);
23 | const mouseY = useMotionValue(0);
24 |
25 | return (
26 | {
28 | const { left, top } = e.currentTarget.getBoundingClientRect();
29 |
30 | mouseX.set(e.clientX - left);
31 | mouseY.set(e.clientY - top);
32 | }}
33 | className={cn(
34 | "group relative flex size-full overflow-hidden rounded-xl bg-neutral-900 border text-white",
35 | className
36 | )}
37 | >
38 |
{children}
39 |
47 |
34 | {Array(repeat)
35 | .fill(0)
36 | .map((_, i) => (
37 |
46 | {children}
47 |
48 | ))}
49 |
(null);
20 | const motionValue = useMotionValue(direction === "down" ? value : 0);
21 | const springValue = useSpring(motionValue, {
22 | damping: 60,
23 | stiffness: 100,
24 | });
25 | const isInView = useInView(ref, { once: true, margin: "0px" });
26 |
27 | useEffect(() => {
28 | isInView &&
29 | setTimeout(() => {
30 | motionValue.set(direction === "down" ? 0 : value);
31 | }, delay * 1000);
32 | }, [motionValue, isInView, delay, value, direction]);
33 |
34 | useEffect(
35 | () =>
36 | springValue.on("change", (latest) => {
37 | if (ref.current) {
38 | ref.current.textContent = Intl.NumberFormat("en-US").format(
39 | latest.toFixed(0),
40 | );
41 | }
42 | }),
43 | [springValue],
44 | );
45 |
46 | return (
47 |
13 |
14 |
15 | YourLMS
16 |
17 |
18 | {links.map((link) => (
19 |
20 |
28 | ))}
29 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | Start Learning
43 |
44 |
45 |
46 | loading...
47 |
48 |
49 |
50 |
52 | );
53 | };
54 |
55 | export default Navbar;
56 |
--------------------------------------------------------------------------------
/src/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const badgeVariants = cva(
7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8 | {
9 | variants: {
10 | variant: {
11 | default: "border-transparent bg-primary text-primary-foreground ",
12 | secondary:
13 | "border-transparent bg-secondary text-secondary-foreground h",
14 | destructive:
15 | "border-transparent bg-destructive text-destructive-foreground ",
16 | outline: "text-foreground",
17 | },
18 | },
19 | defaultVariants: {
20 | variant: "default",
21 | },
22 | }
23 | );
24 |
25 | export interface BadgeProps
26 | extends React.HTMLAttributes,
27 | VariantProps {}
28 |
29 | function Badge({ className, variant, ...props }: BadgeProps) {
30 | return (
31 |
32 | );
33 | }
34 |
35 | export { Badge, badgeVariants };
36 |
--------------------------------------------------------------------------------
/src/components/ui/bento-grid.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | export const BentoGrid = ({
4 | className,
5 | children,
6 | }: {
7 | className?: string;
8 | children?: React.ReactNode;
9 | }) => {
10 | return (
11 |
17 | {children}
18 |
19 | );
20 | };
21 |
22 | export const BentoGridItem = ({
23 | className,
24 | title,
25 | description,
26 | header,
27 | icon,
28 | }: {
29 | className?: string;
30 | title?: string | React.ReactNode;
31 | description?: string | React.ReactNode;
32 | header?: React.ReactNode;
33 | icon?: React.ReactNode;
34 | }) => {
35 | return (
36 |
42 | {header}
43 |
44 | {icon}
45 |
46 | {title}
47 |
48 |
49 | {description}
50 |
51 |
52 |
,
39 | VariantProps {
40 | asChild?: boolean
41 | }
42 |
43 | const Button = React.forwardRef(
44 | ({ className, variant, size, asChild = false, ...props }, ref) => {
45 | const Comp = asChild ? Slot : "button"
46 | return (
47 |
8 | >(({ className, ...props }, ref) => (
9 |
17 | ))
18 | Card.displayName = "Card"
19 |
20 | const CardHeader = React.forwardRef<
21 | HTMLDivElement,
22 | React.HTMLAttributes
23 | >(({ className, ...props }, ref) => (
24 |
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 |
32 | const CardTitle = React.forwardRef<
33 | HTMLParagraphElement,
34 | React.HTMLAttributes
35 | >(({ className, ...props }, ref) => (
36 |
50 | >(({ className, ...props }, ref) => (
51 |
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 |
59 | const CardContent = React.forwardRef<
60 | HTMLDivElement,
61 | React.HTMLAttributes
62 | >(({ className, ...props }, ref) => (
63 |
64 | ))
65 | CardContent.displayName = "CardContent"
66 |
67 | const CardFooter = React.forwardRef<
68 | HTMLDivElement,
69 | React.HTMLAttributes
70 | >(({ className, ...props }, ref) => (
71 |
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 |
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 |
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { Check } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => (
13 |
21 |
24 |
26 |
27 | ))
28 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
29 |
30 | export { Checkbox }
31 |
--------------------------------------------------------------------------------
/src/components/ui/flip-words.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useCallback, useEffect, useRef, useState } from "react";
3 | import { AnimatePresence, motion, LayoutGroup } from "framer-motion";
4 | import { cn } from "@/lib/utils";
5 |
6 | export const FlipWords = ({
7 | words,
8 | duration = 3000,
9 | className,
10 | }: {
11 | words: string[];
12 | duration?: number;
13 | className?: string;
14 | }) => {
15 | const [currentWord, setCurrentWord] = useState(words[0]);
16 | const [isAnimating, setIsAnimating] = useState(false);
17 |
18 | // thanks for the fix Julian - https://github.com/Julian-AT
19 | const startAnimation = useCallback(() => {
20 | const word = words[words.indexOf(currentWord) + 1] || words[0];
21 | setCurrentWord(word);
22 | setIsAnimating(true);
23 | }, [currentWord, words]);
24 |
25 | useEffect(() => {
26 | if (!isAnimating)
27 | setTimeout(() => {
28 | startAnimation();
29 | }, duration);
30 | }, [isAnimating, duration, startAnimation]);
31 |
32 | return (
33 | {
35 | setIsAnimating(false);
36 | }}
37 | >
38 |
66 | {currentWord.split("").map((letter, index) => (
67 |
77 | {letter}
78 |
79 | ))}
80 |
81 |
82 | );
83 | };
84 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes {}
7 |
8 | const Input = React.forwardRef(
9 | ({ className, type, ...props }, ref) => {
10 | return (
11 | ,
15 | React.ComponentPropsWithoutRef &
16 | VariantProps
17 | >(({ className, ...props }, ref) => (
18 | ,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |
17 |
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 |
31 | export { Popover, PopoverTrigger, PopoverContent }
32 |
--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, value, ...props }, ref) => (
12 |
20 |
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 |
28 | export { Progress }
29 |
--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5 | import { Circle } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const RadioGroup = React.forwardRef<
10 | React.ElementRef,
11 | React.ComponentPropsWithoutRef
12 | >(({ className, ...props }, ref) => {
13 | return (
14 | ,
25 | React.ComponentPropsWithoutRef
26 | >(({ className, ...props }, ref) => {
27 | return (
28 |
36 |
37 |
39 |
40 | )
41 | })
42 | RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
43 |
44 | export { RadioGroup, RadioGroupItem }
45 |
--------------------------------------------------------------------------------
/src/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 |
3 | function Skeleton({
4 | className,
5 | ...props
6 | }: React.HTMLAttributes) {
7 | return (
8 |
12 | )
13 | }
14 |
15 | export { Skeleton }
16 |
--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Table = React.forwardRef<
6 | HTMLTableElement,
7 | React.HTMLAttributes
8 | >(({ className, ...props }, ref) => (
9 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
22 | >(({ className, ...props }, ref) => (
23 |
30 | >(({ className, ...props }, ref) => (
31 |
42 | >(({ className, ...props }, ref) => (
43 | tr]:last:border-b-0",
47 | className
48 | )}
49 | {...props}
50 | />
51 | ))
52 | TableFooter.displayName = "TableFooter"
53 |
54 | const TableRow = React.forwardRef<
55 | HTMLTableRowElement,
56 | React.HTMLAttributes
57 | >(({ className, ...props }, ref) => (
58 |
72 | >(({ className, ...props }, ref) => (
73 |
87 | >(({ className, ...props }, ref) => (
88 |
99 | >(({ className, ...props }, ref) => (
100 | ,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 | ,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 | ,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
36 | {wordsArray.map((word, idx) => {
37 | return (
38 |
45 | {word}{" "}
46 |
47 | );
48 | })}
49 |
50 | );
51 | };
52 |
53 | return (
54 |
55 |
56 |
57 | {renderWords()}
58 |
59 |
60 |
{}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/lib/db.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client'
2 |
3 | const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }
4 |
5 | export const prisma =
6 | globalForPrisma.prisma || new PrismaClient()
7 |
8 | if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
9 |
--------------------------------------------------------------------------------
/src/lib/uploadthing.ts:
--------------------------------------------------------------------------------
1 | import {
2 | generateReactHelpers,
3 | generateUploadButton,
4 | generateUploadDropzone,
5 | } from "@uploadthing/react";
6 |
7 | import type { OurFileRouter } from "@/app/api/uploadthing/core";
8 |
9 | export const UploadButton = generateUploadButton();
10 | export const UploadDropzone = generateUploadDropzone();
11 | export const { useUploadThing } = generateReactHelpers();
12 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
2 |
3 | const isProtected = createRouteMatcher([
4 | "/dashboard(.*), /access(.*),/create(.*), /settings(.*)",
5 | ]);
6 |
7 | export default clerkMiddleware((auth, req) => {
8 | if (isProtected(req)) auth().protect();
9 | });
10 |
11 | export const config = {
12 | matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
13 | };
14 |
--------------------------------------------------------------------------------
/src/providers/context-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { createContext, useState } from "react";
3 |
4 | interface ContextState {
5 | search: string;
6 | setSearch: (search: string) => void;
7 | }
8 |
9 | export const MyContext = createContext({
10 | search: "",
11 | setSearch: () => {},
12 | });
13 |
14 | export const ContextProvider = ({
15 | children,
16 | }: {
17 | children: React.ReactNode;
18 | }) => {
19 | const [search, setSearch] = useState("");
20 |
21 | return (
22 |
23 | {children}
24 |
25 | );
26 | };
27 |
--------------------------------------------------------------------------------
/src/providers/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
5 | import { type ThemeProviderProps } from "next-themes/dist/types";
6 |
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return {children} ;
9 | }
10 |
--------------------------------------------------------------------------------
/src/providers/toast-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useTheme } from "next-themes";
3 | import React from "react";
4 | import { Toaster } from "sonner";
5 |
6 | const ToastProvider = () => {
7 | const { theme, systemTheme } = useTheme();
8 | const system = theme === "dark" ? "dark" : theme ? "light" : systemTheme;
9 | return 
42 |
43 |
44 |
45 |
46 | go home
47 |
48 |