rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 20:09:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: redesign course page

Browse source
This commit is contained in:
swve 2023-02-04 16:44:47 +01:00
parent 6e037538af
commit b49f15814f
1 changed files with 48 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

65
front/app/_orgs/[orgslug]/courses/page.tsx
View file

@ -8,6 +8,7 @@ import { getAPIUrl, getBackendUrl } from "../../../../services/config";
import { deleteCourseFromBackend } from "../../../../services/courses/courses";
import useSWR, { mutate } from "swr";
import { swrFetcher } from "@services/utils/requests";
import { Edit2, Trash } from "lucide-react";
const CoursesIndexPage = (params: any) => {
const router = useRouter();
@ -28,35 +29,33 @@ const CoursesIndexPage = (params: any) => {
return (
<>
<Title>
{orgslug} Courses :{" "}
Courses :{" "}
<Link href={"/courses/new"}>
<button>+</button>
</Link>{" "}
</Title>
<hr />
{error && <p>Failed to load</p>}
{!courses ? (
<div>Loading...</div>
) : (
<div>
<CourseWrapper>
{courses.map((course: any) => (
<div key={course.course_id}>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
<h2>{course.name}</h2>
<CourseWrapper>
<button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
Delete <Trash size={10}></Trash>
</button>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
<button>Edit <Edit2 size={10} ></Edit2></button>
</Link>
<CourseThumbnail>
<img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
</CourseWrapper>
</Link>
<button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
Delete
</button>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
<button>Edit Chapters</button>
</CourseThumbnail>
<h2>{course.name}</h2>
</Link>
</div>
))}
</div>
</CourseWrapper>
)}
</>
);
@ -64,11 +63,11 @@ const CoursesIndexPage = (params: any) => {
export default CoursesIndexPage;
const CourseWrapper = styled.div`
const CourseThumbnail = styled.div`
display: flex;
img {
width: 269px;
height: 151px;
width: 249px;
height: 131px;
background: url(), #d9d9d9;
border: 1px solid rgba(255, 255, 255, 0.19);
@ -76,3 +75,35 @@ const CourseWrapper = styled.div`
border-radius: 7px;
}
`;
const CourseWrapper = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
max-width: 1500px;
div {
h2 {
margin: 0;
padding: 0;
margin-top: 10px;
font-size: 18px;
font-weight: 600;
width: 250px;
height: 50px;
color: #424242;
}
button {
margin: 4px 0;
border: none;
border-radius: 7px;
background: #000000;
opacity: 0.4;
color: #ffffff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
}
`;