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

master
mahdi 2 years ago
parent 421ef0a9ea
commit 8a1ce0f8fa
  1. 68
      src/components/Accordion/AccordionDesign1/index.js
  2. 2
      src/components/Code/index.js

@ -3,9 +3,9 @@ import CircleInCircle from "../../MiniComponents/CircleInCircle";
import Button from "../../ButtonDesign/Button";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
const AccordionDesign1 = ({ courses, vod }) => {
const AccordionDesign1 = ({ items, vod }) => {
const [activeAccordion, setActiveAccordion] = useState(null);
const [accordions, updateAccordion] = useState(courses);
const [accordions, updateAccordion] = useState(items);
function handleOnDragEnd(result) {
if (!result.destination) return;
@ -18,20 +18,19 @@ const AccordionDesign1 = ({ courses, vod }) => {
}
return (
<>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="accordions">
<Droppable droppableId="container">
{(provided) => (
<section
className="w-full flex flex-col bg-gray-200"
{...provided.droppableProps}
ref={provided.innerRef}
id="accordions"
id="container"
>
{courses.map((course, index) => (
{items.map((item, index) => (
<Draggable
key={course.id}
draggableId={"e" + course.id}
key={item.id}
draggableId={"e" + item.id}
index={index}
>
{(provided) => (
@ -48,37 +47,37 @@ const AccordionDesign1 = ({ courses, vod }) => {
{/* parent */}
<div
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${
activeAccordion === course
activeAccordion === item
? "border-surfaceBorder "
: "border-secondary"
} cursor-pointer`}
onClick={() =>
setActiveAccordion(
activeAccordion === course ? null : course
activeAccordion === item ? null : item
)
}
>
<CircleInCircle
parentClassName={"bg-secondary w-4 h-4 "}
parentClassName={"bg-secondary w-0 h- "}
childClassName={false}
/>
<h2 className="flex-1 mr-5 text-sm">{course.title}</h2>
<h2 className="flex-1 mr-5 text-sm">{item.title}</h2>
{vod && (
<div className="flex flex-row items-center ml-5 ">
<p className="text-xs">
دقیقه:
<span>{course.min}</span>
<span>{item.min}</span>
</p>
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div>
<p className="text-xs">
ویدیو:
<span>{course.video}</span>
<span>{item.video}</span>
</p>
</div>
)}
<img
src={
activeAccordion === course
activeAccordion === item
? `images/accordion-.svg`
: `images/accordion+.svg`
}
@ -87,8 +86,8 @@ const AccordionDesign1 = ({ courses, vod }) => {
/>
</div>
{/* child */}
{activeAccordion === course &&
course.lessons.map((lesson, i) => (
{activeAccordion === item &&
item.subItems.map((subItem, 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 && (
@ -107,14 +106,14 @@ const AccordionDesign1 = ({ courses, vod }) => {
</span>
</div>
<div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div>
<p className="text-sm flex-1">{lesson.name}</p>
<p className="text-sm flex-1">{subItem.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>
<span>{item.min}</span>
</p>
<Button
className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4"
@ -148,7 +147,6 @@ const AccordionDesign1 = ({ courses, vod }) => {
)}
</Droppable>
</DragDropContext>
</>
);
};
@ -157,13 +155,13 @@ export default AccordionDesign1;
AccordionDesign1.defaultProps = {
vod: false,
courses: [
items: [
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
video: 4,
min: 30,
lessons: [
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
@ -177,10 +175,11 @@ AccordionDesign1.defaultProps = {
},
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟",
video: 4,
min: 30,
lessons: [
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
@ -194,10 +193,10 @@ AccordionDesign1.defaultProps = {
},
{
title:
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟",
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟",
video: 4,
min: 30,
lessons: [
subItems: [
{
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟",
},
@ -211,20 +210,3 @@ 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}
// />

@ -1,6 +1,5 @@
import { useState } from "react";
import copyIcon from "./copy.png";
import MonacoEditor from "react-monaco-editor";
function Code({ code }) {
const [copied, setCopied] = useState(false);
@ -14,7 +13,6 @@ 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">

Loading…
Cancel
Save