+
{question && (
-
+
diff --git a/src/components/BreadCrumbComponent.tsx b/src/components/BreadCrumbComponent.tsx
index 0f1da1379..ba2426a35 100644
--- a/src/components/BreadCrumbComponent.tsx
+++ b/src/components/BreadCrumbComponent.tsx
@@ -10,7 +10,7 @@ import {
} from '@/components/ui/breadcrumb';
import { FullCourseContent } from '@/db/course';
import Link from 'next/link';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
export default function BreadCrumbComponent({
rest,
@@ -83,7 +83,7 @@ export default function BreadCrumbComponent({
finalRouteArray = [...rest];
}
return (
- <>
+
{index !== array.length - 1 ? (
<>
@@ -105,7 +105,7 @@ export default function BreadCrumbComponent({
)}
-
+
);
})}
diff --git a/src/components/CardComponent.tsx b/src/components/CardComponent.tsx
index 3ecc89669..b557437cc 100644
--- a/src/components/CardComponent.tsx
+++ b/src/components/CardComponent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import bgImage from '../../public/Content-Cover.png';
const CardComponent = ({
title,
@@ -14,12 +14,14 @@ const CardComponent = ({
const [, secondPart] = title.split(' | ');
return (
-
-
-
+
+ 
+
+
100xdevs
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx index 58d29c2ea..eabf2464d 100644 --- a/src/components/ContentCard.tsx +++ b/src/components/ContentCard.tsx @@ -1,9 +1,10 @@ -import { CheckCircle2, Play } from 'lucide-react'; +import { CheckCircle2 } from 'lucide-react'; import { Bookmark } from '@prisma/client'; import BookmarkButton from './bookmark/BookmarkButton'; import { formatTime } from '@/lib/utils'; import VideoThumbnail from './videothumbnail'; import CardComponent from './CardComponent'; +import DonutChart from './DonutChart'; export const ContentCard = ({ title, @@ -15,6 +16,7 @@ export const ContentCard = ({ bookmark, contentId, contentDuration, + createdAt, }: { type: 'folder' | 'video' | 'notion'; contentId?: number; @@ -27,26 +29,26 @@ export const ContentCard = ({ hoverExpand?: boolean; bookmark?: Bookmark | null; contentDuration?: number; + createdAt: Date; }) => { - // let image ; - // image = "" + const formattedDate = createdAt?.toLocaleDateString('en-GB', { + day: '2-digit', + month: 'long', + year: 'numeric', + }); + return (
{markAsCompleted && (
- {contentDuration && formatTime(contentDuration)}
-
- )}
{type !== 'video' && (
-
+
)}
{type === 'video' && (
-
+
- Posted on: 10 Aug 2024
+
-
);
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 48a4fc358..366f7eeff 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -27,7 +27,7 @@ export const CourseCard = ({
const router = useRouter();
return (
![]()
{
+ const contentType = courseContent?.folder
+ ? 'folder'
+ : courseContent?.value.type;
return (
{title}
-
- Posted on: 10 Aug 2024
+
+ Posted on: {formattedDate}
-
-
+ )}
+
-
- ({
+ courseContent={courseContent?.value.map((x: any) => ({
title: x?.title || '',
image: x?.thumbnail || '',
type: x?.type || 'folder',
@@ -81,6 +95,8 @@ export const CourseView = ({
percentComplete: getFolderPercentCompleted(x?.children),
videoFullDuration: x?.videoProgress?.videoFullDuration || 0,
duration: x?.videoProgress?.duration || 0,
+ bookmark: null,
+ createdAt: x?.createdAt,
}))}
courseId={parseInt(course.id, 10)}
/>
diff --git a/src/components/CourseViewToolbar.tsx b/src/components/CourseViewToolbar.tsx
new file mode 100644
index 000000000..dc0db42a4
--- /dev/null
+++ b/src/components/CourseViewToolbar.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { FullCourseContent } from '@/db/course';
+import BreadCrumbComponent from './BreadCrumbComponent';
+import { Button } from './ui/button';
+import { LuListVideo } from 'react-icons/lu';
+import { useRecoilState } from 'recoil';
+import { sidebarOpen as sidebarOpenAtom } from '@/store/atoms/sidebar';
+import { useEffect, useState } from 'react';
+
+export const CourseViewToolbar = ({
+ courseData,
+}: {
+ courseData: {
+ course: any;
+ contentType: any;
+ courseContent: any;
+ fullCourseContent: FullCourseContent[];
+ rest: string[];
+ };
+}) => {
+ const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
+ const [showButtonTitle, setShowButtonTitle] = useState(true);
+
+ useEffect(() => {
+ if (window.innerWidth < 500) {
+ setShowButtonTitle(false);
+ }
+ }, []);
+
+ return (
+
-
-
+
- {contentType === 'notion' ? (
+ {!courseContent?.folder && courseContent?.value.type === 'notion' ? (
-
) : null}
- {contentType === 'video' ? (
+ {!courseContent?.folder && contentType === 'video' ? (
+
+ );
+};
diff --git a/src/components/Courses.tsx b/src/components/Courses.tsx
index af7ad0945..9db8cdd9c 100644
--- a/src/components/Courses.tsx
+++ b/src/components/Courses.tsx
@@ -8,7 +8,7 @@ export const Courses = ({ courses }: { courses: Course[] }) => {
const router = useRouter();
return (
+
{courses?.map((course) => (
{
+ const radius = 23;
+ const strokeWidth = 5;
+ const normalizedRadius = radius - strokeWidth / 2;
+ const circumference = normalizedRadius * 2 * Math.PI;
+ const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+ return (
+
+
+
+ );
+};
+
+export default DonutChart;
diff --git a/src/components/FolderView.tsx b/src/components/FolderView.tsx
index 0ae56a628..a212174a9 100644
--- a/src/components/FolderView.tsx
+++ b/src/components/FolderView.tsx
@@ -2,6 +2,8 @@
import { useRouter } from 'next/navigation';
import { ContentCard } from './ContentCard';
import { Bookmark } from '@prisma/client';
+import { sidebarOpen as sidebarOpenAtom } from '@/store/atoms/sidebar';
+import { useRecoilState } from 'recoil';
export const FolderView = ({
courseContent,
@@ -20,9 +22,11 @@ export const FolderView = ({
videoFullDuration?: number;
duration?: number;
bookmark: Bookmark | null;
+ createdAt: Date;
}[];
}) => {
const router = useRouter();
+ const [sidebarOpen] = useRecoilState(sidebarOpenAtom);
if (!courseContent?.length) {
return (
@@ -39,7 +43,9 @@ export const FolderView = ({
return (
-
+
diff --git a/src/components/RefreshDb.tsx b/src/components/RefreshDb.tsx
index fa1f0ff27..06cf7f4d8 100644
--- a/src/components/RefreshDb.tsx
+++ b/src/components/RefreshDb.tsx
@@ -2,9 +2,10 @@
import { Button } from './ui/button';
import { toast } from 'sonner';
import { useSession } from 'next-auth/react';
+import { RefreshCw } from 'lucide-react';
//@ts-ignore
-export function RefreshDb({ refreshDb }) {
+export function RefreshDb({ refreshDb, expanded }) {
const session = useSession();
const handleClick = async () => {
@@ -17,13 +18,13 @@ export function RefreshDb({ refreshDb }) {
}
};
- if (session.status === 'loading') return <>Loading...;
+ // if (session.status === 'loading') return <>Loading...;
return (
{courseContent.map((content) => {
const videoProgressPercent =
content.type === 'video' &&
@@ -62,6 +68,7 @@ export const FolderView = ({
videoProgressPercent={videoProgressPercent}
bookmark={content.bookmark}
contentDuration={content.videoFullDuration}
+ createdAt={content.createdAt}
/>
);
})}
diff --git a/src/components/NewPostDialog.tsx b/src/components/NewPostDialog.tsx
index a3b977316..c30da7580 100644
--- a/src/components/NewPostDialog.tsx
+++ b/src/components/NewPostDialog.tsx
@@ -137,7 +137,7 @@ export const NewPostDialog = () => {
type="submit"
className="mb-2 me-2 rounded-lg bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 text-center text-sm font-medium hover:bg-gradient-to-br dark:text-white"
>
- Post-it
+ Post
-
);
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4cb4df1a7..5024d1ae6 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -6,7 +6,7 @@ import {
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
-import { X, ChevronRight } from 'lucide-react';
+import { X } from 'lucide-react';
import { FullCourseContent } from '@/db/course';
import { useRecoilState } from 'recoil';
import { sidebarOpen as sidebarOpenAtom } from '@/store/atoms/sidebar';
@@ -151,37 +151,27 @@ export function Sidebar({
});
};
- if (!sidebarOpen) {
- return (
- Don't see all your courses?
+ {expanded &&Don't see all your courses?
} setSidebarOpen((s) => !s)}
- className="mt-2 cursor-pointer"
- >
-
- );
- }
-
return (
-
-
-
- {/* Render course content */}
- {renderContent(fullCourseContent)}
-
-
+ )}
+
);
}
diff --git a/src/components/VideoContentChapters.tsx b/src/components/VideoContentChapters.tsx
index 098921581..c16c4a9b4 100644
--- a/src/components/VideoContentChapters.tsx
+++ b/src/components/VideoContentChapters.tsx
@@ -34,7 +34,7 @@ const VideoContentChapters = ({
}, [player]);
return (
- Course Content
- {
- setSidebarOpen((s) => !s);
- }}
- >
-
-
+
+ {/* Render course content */}
+ {renderContent(fullCourseContent)}
+
-
+
+ Course Content
+ {
+ setSidebarOpen((s) => !s);
+ }}
+ >
+
+
+
Chapters
-
- {history.map((progress) => (
-
-
- ))}
-
-
-);
+const WatchHistoryClient = ({ history }: { history: TWatchHistory[] }) => {
+ return (
+
+
+ {history.map((progress) => (
+
+
+ ))}
+
+
+ );
+};
const HistoryCard = ({
id,
contentId,
currentTimestamp,
- content: { type, title, thumbnail, hidden, parent, VideoMetadata },
+ content: { type, title, thumbnail, hidden, parent, VideoMetadata, createdAt },
}: TWatchHistory) => {
const router = useRouter();
@@ -44,6 +46,7 @@ const HistoryCard = ({
const videoProgressPercent = videoDuration
? Math.round((currentTimestamp / videoDuration) * 100)
: 0;
+
return (
-
-
+
+
);
diff --git a/src/components/admin/CourseContent.tsx b/src/components/admin/CourseContent.tsx
index 2546d342c..c552c20e2 100644
--- a/src/components/admin/CourseContent.tsx
+++ b/src/components/admin/CourseContent.tsx
@@ -12,6 +12,7 @@ export const AdminCourseContent = ({
title: string;
image: string;
id: number;
+ createdAt: Date;
}[];
rest: string[];
}) => {
@@ -26,7 +27,12 @@ export const AdminCourseContent = ({
Course content
{courseContent?.map(
- (content: { image: string; id: number; title: string }) => (
+ (content: {
+ image: string;
+ id: number;
+ title: string;
+ createdAt: Date;
+ }) => (
{
return (
@@ -43,7 +42,7 @@ const DailyCodeSection = () => {
{
{
@@ -44,7 +43,7 @@ const DiscordSection = () => {
{
= ({
+ {!isAnswer && !enableLink && isExtendedQuestion(post) && (
+ <>
+
+ {post?.title}
+
+
+ )}
+
{!isAnswer && enableLink && isExtendedQuestion(post) && (
-
+
{post?.title}
)}
-
+
+ {post.content && (
+
= ({
))}
- {isExtendedQuestion(post) &&
- post.tags
- .filter((v) => v !== '')
- .map((v, index) => = ({
)} */}
- {!isAnswer && !enableLink && isExtendedQuestion(post) && (
-
- {post?.title}
-
- )}
- {post.content && (
-
);
};
@@ -255,6 +240,24 @@ const PostCard: React.FC = ({
{internalDetails()}
+ {enableReply && (
+
@@ -46,8 +59,9 @@ export const MenuOptions = () => {
+
+
+ )}
+
+ {isExtendedQuestion(post) &&
+ post.tags
+ .filter((v) => v !== '')
+ .map((v, index) =>
-
-
- )}
-
- {enableReply && (
-
-
- -
- )}
- -
+
+
+ )}
);
};
diff --git a/src/components/search.tsx b/src/components/search.tsx
index ee01a955c..57ac89386 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -18,8 +18,8 @@ const Search = () => {
router.push(getUpdatedUrl(path, paramsObj, { search }));
};
return (
-
-
+
);
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 370b1f154..d28777ba4 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -1,7 +1,8 @@
'use client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
import { AnimatedTooltip } from '@/components/ui/animated-tooltip';
import { signOut } from 'next-auth/react';
+import { refreshDb } from '@/actions/refresh-db';
import Logo from '../landing/logo/logo';
import {
@@ -10,8 +11,10 @@ import {
MessageSquare,
History,
PanelRightOpen,
+ PanelLeftOpen,
LogOut,
} from 'lucide-react';
+import { RefreshDb } from '../RefreshDb';
export const menuOptions = [
{ id: 1, name: 'My Courses', Component: Library, href: '/my-courses' },
@@ -23,6 +26,12 @@ export const menuOptions = [
export const MenuOptions = () => {
const [expanded, setExpanded] = useState(true);
+ useEffect(() => {
+ if (window.innerWidth < 500) {
+ setExpanded(false);
+ }
+ }, []);
+
return (
Search
+
+