rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19: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

61
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 { deleteCourseFromBackend } from "../../../../services/courses/courses";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
import { swrFetcher } from "@services/utils/requests"; import { swrFetcher } from "@services/utils/requests";
import { Edit2, Trash } from "lucide-react";
const CoursesIndexPage = (params: any) => { const CoursesIndexPage = (params: any) => {
const router = useRouter(); const router = useRouter();
@ -28,35 +29,33 @@ const CoursesIndexPage = (params: any) => {
return ( return (
<> <>
<Title> <Title>
{orgslug} Courses :{" "} Courses :{" "}
<Link href={"/courses/new"}> <Link href={"/courses/new"}>
<button>+</button> <button>+</button>
</Link>{" "} </Link>{" "}
</Title> </Title>
<hr />
{error && <p>Failed to load</p>} {error && <p>Failed to load</p>}
{!courses ? ( {!courses ? (
<div>Loading...</div> <div>Loading...</div>
) : ( ) : (
<div> <CourseWrapper>
{courses.map((course: any) => ( {courses.map((course: any) => (
<div key={course.course_id}> <div key={course.course_id}>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}> <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
<h2>{course.name}</h2>
<CourseWrapper>
<img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
</CourseWrapper>
</Link>
<button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}> <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
Delete Delete <Trash size={10}></Trash>
</button> </button>
<Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}> <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
<button>Edit Chapters</button> <button>Edit <Edit2 size={10} ></Edit2></button>
</Link>
<CourseThumbnail>
<img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
</CourseThumbnail>
<h2>{course.name}</h2>
</Link> </Link>
</div> </div>
))} ))}
</div> </CourseWrapper>
)} )}
</> </>
); );
@ -64,11 +63,11 @@ const CoursesIndexPage = (params: any) => {
export default CoursesIndexPage; export default CoursesIndexPage;
const CourseWrapper = styled.div` const CourseThumbnail = styled.div`
display: flex; display: flex;
img { img {
width: 269px; width: 249px;
height: 151px; height: 131px;
background: url(), #d9d9d9; background: url(), #d9d9d9;
border: 1px solid rgba(255, 255, 255, 0.19); border: 1px solid rgba(255, 255, 255, 0.19);
@ -76,3 +75,35 @@ const CourseWrapper = styled.div`
border-radius: 7px; 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;
}
}
`;