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

chore: refactor components

Browse source
This commit is contained in:
swve 2023-04-08 15:54:02 +02:00
parent ca5110e4f7
commit d6289edb29
21 changed files with 13 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

76
front/components/Drags/Chapter.tsx
View file

@ -1,76 +0,0 @@
import React from "react";
import styled from "styled-components";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Activity, { ActivityWrapper } from "./Activity";
function Chapter(props: any) {
return (
<Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
{(provided, snapshot) => (
<ChapterWrapper
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
// isDragging={snapshot.isDragging}
key={props.info.list.chapter.id}
>
<h3>
{props.info.list.chapter.name}{" "}
<button
onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id);
}}
>
Create Activity
</button>
<button
onClick={() => {
props.deleteChapter(props.info.list.chapter.id);
}}
>
X
</button>
</h3>
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
{(provided) => (
<ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
{props.info.list.activities.map((activity: any, index: any) => (
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
))}
{provided.placeholder}
</ActivitiesList>
)}
</Droppable>
</ChapterWrapper>
)}
</Draggable>
);
}
const ChapterWrapper = styled.div`
margin-bottom: 20px;
padding: 4px;
background-color: #ffffffc5;
width: 900px;
font-size: 15px;
display: block;
border-radius: 9px;
border: 1px solid rgba(255, 255, 255, 0.19);
box-shadow: 0px 13px 33px -13px rgb(0 0 0 / 12%);
transition: all 0.2s ease;
h3{
padding-left: 20px;
padding-right: 20px;
}
`;
const ActivitiesList = styled.div`
padding: 10px;
`;
export default Chapter;