mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update src/components/Accordion/AccordionDesign1/index.js and src/components/Code/index.js

Browse Source
master
mahdi 3 years ago
parent d693992591
commit 421ef0a9ea
2 changed files with 142 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 261
      src/components/Accordion/AccordionDesign1/index.js
  2. 2
      src/components/Code/index.js

261
src/components/Accordion/AccordionDesign1/index.js
Unescape View File

@ -18,135 +18,137 @@ const AccordionDesign1 = ({ courses, vod }) => {
}
return (
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="accordions">
{(provided) => (
<section
className="w-full flex flex-col bg-gray-200"
{...provided.droppableProps}
ref={provided.innerRef}
id="accordions"
>
{courses.map((course, index) => (
<Draggable
key={course.id}
draggableId={"e" + course.id}
index={index}
>
{(provided) => (
<div
className="flex flex-col"
key={index}
props={{
ref: provided.innerRef,
...provided.draggableProps,
...provided.dragHandleProps,
}}
style={provided.draggableProps.style}
>
{/* parent */}
<>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="accordions">
{(provided) => (
<section
className="w-full flex flex-col bg-gray-200"
{...provided.droppableProps}
ref={provided.innerRef}
id="accordions"
>
{courses.map((course, index) => (
<Draggable
key={course.id}
draggableId={"e" + course.id}
index={index}
>
{(provided) => (
<div
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === course
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
onClick={() =>
setActiveAccordion(
activeAccordion === course ? null : course
)
}
className="flex flex-col"
key={index}
props={{
ref: provided.innerRef,
...provided.draggableProps,
...provided.dragHandleProps,
}}
style={provided.draggableProps.style}
>
<CircleInCircle
parentClassName={"bg-secondary w-4 h-4 "}
childClassName={false}
/>
<h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
{vod && (
<div className="flex flex-row items-center ml-5 ">
<p className="text-xs">
دقیقه:
<span>{course.min}</span>
</p>
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
<p className="text-xs">
ویدیو:
<span>{course.video}</span>
</p>
</div>
)}
<img
src={
{/* parent */}
<div
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === course
? `images/accordion-.svg`
: `images/accordion+.svg`
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
onClick={() =>
setActiveAccordion(
activeAccordion === course ? null : course
)
}
alt=""
class="w-3 ml-2"
/>
</div>
{/* child */}
{activeAccordion === course &&
course.lessons.map((lesson, i) => (
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out">
<div className="flex flex-row items-center">
{vod === !true && (
<img
src="images/accordionGroup2725.svg"
className="w-3"
alt="line"
/>
)}
<span
className={`text-sm ${
vod === true ? "mr-0" : "mr-3"
}`}
>
{i + 1}
</span>
>
<CircleInCircle
parentClassName={"bg-secondary w-4 h-4 "}
childClassName={false}
/>
<h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
{vod && (
<div className="flex flex-row items-center ml-5 ">
<p className="text-xs">
دقیقه:
<span>{course.min}</span>
</p>
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
<p className="text-xs">
ویدیو:
<span>{course.video}</span>
</p>
</div>
<div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
<p className="text-sm flex-1">{lesson.name}</p>
<div className="flex flex-row items-center justify-end gap-x-3 flex-1">
{vod ? (
<>
<div className="flex flex-row items-center ml-7">
<p className="text-xs">
دقیقه:
<span>{course.min}</span>
</p>
<Button
className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
text={"پخش"}
/>
</div>
</>
) : (
<>
)}
<img
src={
activeAccordion === course
? `images/accordion-.svg`
: `images/accordion+.svg`
}
alt=""
class="w-3 ml-2"
/>
</div>
{/* child */}
{activeAccordion === course &&
course.lessons.map((lesson, i) => (
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out">
<div className="flex flex-row items-center">
{vod === !true && (
<img
src="images/accordionGroup2724.svg"
className="w-8 rounded"
alt="delete-button"
src="images/accordionGroup2725.svg"
className="w-3"
alt="line"
/>
<img
src="images/accordionGroup2723.svg"
className="w-8 rounded"
alt="edit-button"
/>
</>
)}
)}
<span
className={`text-sm ${
vod === true ? "mr-0" : "mr-3"
}`}
>
{i + 1}
</span>
</div>
<div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
<p className="text-sm flex-1">{lesson.name}</p>
<div className="flex flex-row items-center justify-end gap-x-3 flex-1">
{vod ? (
<>
<div className="flex flex-row items-center ml-7">
<p className="text-xs">
دقیقه:
<span>{course.min}</span>
</p>
<Button
className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
text={"پخش"}
/>
</div>
</>
) : (
<>
<img
src="images/accordionGroup2724.svg"
className="w-8 rounded"
alt="delete-button"
/>
<img
src="images/accordionGroup2723.svg"
className="w-8 rounded"
alt="edit-button"
/>
</>
)}
</div>
</div>
</div>
))}
{provided.placeholder}
</div>
)}
</Draggable>
))}
</section>
)}
</Droppable>
</DragDropContext>
))}
{provided.placeholder}
</div>
)}
</Draggable>
))}
</section>
)}
</Droppable>
</DragDropContext>
</>
);
};
@ -209,3 +211,20 @@ AccordionDesign1.defaultProps = {
},
],
};
{
/* monaco */
}
// import MonacoEditor from "react-monaco-editor";‍
// <MonacoEditor
// width="800"
// height="600"
// language="javascript"
// theme="vs-dark"
// value={code}
// options={options}
// onChange={::this.onChange}
// editorDidMount={::this.editorDidMount}
// />

2
src/components/Code/index.js
Unescape View File

@ -1,5 +1,6 @@
import { useState } from "react";
import copyIcon from "./copy.png";
import MonacoEditor from "react-monaco-editor";
function Code({ code }) {
const [copied, setCopied] = useState(false);
@ -13,6 +14,7 @@ function Code({ code }) {
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
};
return (
<div className="flex flex-col w-full my-10">
<div className="w-full flex flex-row items-center justify-between">

Write Preview
Loading…
Cancel
Save