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

Loading…
Cancel
Save