delete 2 files and update 2 files

master
mahdi 2 years ago
parent 79f9f8d91a
commit c158ba43c6
  1. 12
      src/components/CardDesgin/CardTrelloDesign/index.js
  2. 90
      src/components/CardDesgin/ProcessCard/index.js
  3. 27
      src/components/CardDesgin/index.js
  4. 0
      src/components/MiniComponents/TitleSubtitle/index.js
  5. 2
      src/components/MiniComponents/index.js
  6. 4
      src/redux/data.js

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import Button from "../ButtonDesign/Button"; import Button from "../../ButtonDesign/Button";
import CircleInCircle from "../CircleInCircle"; import CircleInCircle from "../../CircleInCircle";
import TagDesign1 from "../Tag/TagDesign1"; import TagDesign1 from "../../Tag/TagDesign1";
import AnimatedProgressBar1 from "../ProgressBar/AnimatedProgressbar1"; import AnimatedProgressBar1 from "../../ProgressBar/AnimatedProgressbar1";
import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther"; import ProfilePicNextToEachOther from "../../ProfilePicNextToEachOther";
import CommentIcon from "../MiniComponents/CommentIcon"; import CommentIcon from "../../MiniComponents/CommentIcon";
const CardTrelloDesign = ({ const CardTrelloDesign = ({
circle, circle,

@ -0,0 +1,90 @@
import React from "react";
import Button from "../../ButtonDesign/Button";
const ProcessCard = ({ processes, title, hint, items }) => {
return (
<section className="w-[600px] border border-gray-400 rounded">
{/* right */}
<div className="flex flex-1 flex-col">
{/* top */}
<div className="flex flex-row p-4 bg-blue-100 rounded divide-x-2 divide-gray-300 divide-x-reverse">
{processes.map((process, index) => (
<div
className="flex flex-row flex-1 items-center justify-center flex-grow"
key={index}
>
{process.color && (
<div
className={`w-1.5 h-5 rounded-sm ml-1.5 ${process.color}`}
></div>
)}
<p className="text-xs text-blue-900">{process.name}</p>
<span className="text-xs mr-2 text-blue-900">
{process.content}
</span>
</div>
))}
</div>
{/* middle */}
<div className="flex flex-col p-4">
<h2 className="text-lg text-blue-800 font-sansbold">{title}</h2>
<p className="text-sm text-justify leading-6 mt-3">{hint}</p>
</div>
{/* bottom */}
<div className="flex flex-row item-center justify-around p-4 bg-gray-200 rounded">
{/* right */}
<Button
text={"ویرایش"}
icon={"images/white-cart-icon.svg"}
iconHolderClassName={""}
iconClassName={"mr-2 w-6"}
className="p-2 bg-blue-500 text-white text-sm rounded-md"
/>
{/* left */}
{items.map((item, i) => (
<img src={item.icon} alt="" />
))}
</div>
</div>
{/* left */}
</section>
);
};
export default ProcessCard;
ProcessCard.defaultProps = {
title: "پروسه مختلف در این قسمت قرار می گیرد",
hint: "یک توضیح کوتاه در این پروسه در اینجا قرار خواهد گرفت که نشان دهنده چیز های مختلف است.",
processes: [
{
color: "bg-red-600",
name: "فرایند اجرایی",
content: 256,
},
{
color: false,
name: "وضعیت:",
content: "پرداخت شده",
},
{
color: "bg-blue-600",
name: "در حال انجام",
content: 55,
},
{
color: false,
name: "انجام شده",
content: 100,
},
],
items: [
{
icon: "images/user-edit.svg",
name: "سوالات",
ans: "5",
},
],
};

@ -0,0 +1,27 @@
import React, { useState } from "react";
import CardTrelloDesign from "./CardTrelloDesign";
import ProcessCard from "./ProcessCard";
function CardDesgin() {
const list = {
1: <CardTrelloDesign />,
2: <ProcessCard />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="mb-10 w-20 bg-gray-200"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default CardDesgin;

@ -2,11 +2,13 @@ import React, { useState } from "react";
import CommentIcon from "./CommentIcon"; import CommentIcon from "./CommentIcon";
import RelativeCircle from "./RelativeCircle"; import RelativeCircle from "./RelativeCircle";
import TitleSubtitle from "./TitleSubtitle";
function MiniComponents() { function MiniComponents() {
const list = { const list = {
1: <CommentIcon />, 1: <CommentIcon />,
2: <RelativeCircle />, 2: <RelativeCircle />,
3: <TitleSubtitle />,
}; };
const [type, setType] = useState(1); const [type, setType] = useState(1);

@ -6,7 +6,7 @@ import Alert from "../components/Alert";
import Toast from "../components/Toast"; import Toast from "../components/Toast";
import Banners from "../components/Banners"; import Banners from "../components/Banners";
import Blog from "../components/Blog"; import Blog from "../components/Blog";
import CardTrelloDesign from "../components/CardTrelloDesign"; import CardDesgin from "../components/CardDesgin";
import ChartDesign from "../components/ChartDesign"; import ChartDesign from "../components/ChartDesign";
import ProgressBar from "../components/ProgressBar"; import ProgressBar from "../components/ProgressBar";
import Checkbox from "../components/Checkbox"; import Checkbox from "../components/Checkbox";
@ -207,7 +207,7 @@ const components = [
props: [], props: [],
content: { content: {
name: "Card Designs", name: "Card Designs",
component: <CardTrelloDesign />, component: <CardDesgin />,
code: null, code: null,
}, },
}, },

Loading…
Cancel
Save