parent
809e5c33d0
commit
9fda2b36e5
24 changed files with 314 additions and 258 deletions
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 829 B |
|
After Width: | Height: | Size: 119 KiB |
@ -0,0 +1,22 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
function Avatar({ source, size, rounded, status, userImage }) { |
||||||
|
return ( |
||||||
|
<div className={`${rounded} overflow-hidden relative`}> |
||||||
|
<img |
||||||
|
src={source ? source : userImage} |
||||||
|
alt="avatar" |
||||||
|
style={{ width: size, height: size, objectFit: "cover" }} |
||||||
|
/> |
||||||
|
{status && ( |
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-green-500"></span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Avatar; |
||||||
|
|
||||||
|
Avatar.defaultProps = { |
||||||
|
userImage: "images/blog-author.png", |
||||||
|
}; |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import Button from "./Button"; |
||||||
|
import ButtonDivTag from "./ButtonDivTag"; |
||||||
|
|
||||||
|
function ButtonDesign() { |
||||||
|
const list = { |
||||||
|
1: <Button />, |
||||||
|
2: <ButtonDivTag />, |
||||||
|
}; |
||||||
|
const [type, setType] = useState(1); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col items-center"> |
||||||
|
<select |
||||||
|
className="w-20 bg-gray-200 mb-10" |
||||||
|
onChange={(e) => setType(e.target.value)} |
||||||
|
> |
||||||
|
{Object.keys(list).map((option, index) => ( |
||||||
|
<option key={index}>{option}</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
{list[type]} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default ButtonDesign; |
||||||
@ -1,56 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
import arrow from "../../assets/icons/white-left-arrow.svg"; |
|
||||||
|
|
||||||
const ButtonNewDesign = ({ |
|
||||||
bgColor, |
|
||||||
bgHoverColor, |
|
||||||
iconBgColor, |
|
||||||
textColor, |
|
||||||
border, |
|
||||||
borderColor, |
|
||||||
borderRadius, |
|
||||||
fontSize, |
|
||||||
paddingX, |
|
||||||
paddingY, |
|
||||||
icon, |
|
||||||
buttonIcon, |
|
||||||
text, |
|
||||||
onClick, |
|
||||||
iconMarginRight, |
|
||||||
}) => { |
|
||||||
return ( |
|
||||||
<button |
|
||||||
onClick={onClick} |
|
||||||
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize}
|
|
||||||
${paddingY} ${paddingX}`}
|
|
||||||
> |
|
||||||
{text} |
|
||||||
{icon && ( |
|
||||||
<span className={`rounded-full ${iconMarginRight} ${iconBgColor} `}> |
|
||||||
<img src={buttonIcon} alt="" className="w-full" /> |
|
||||||
</span> |
|
||||||
)} |
|
||||||
</button> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ButtonNewDesign; |
|
||||||
|
|
||||||
ButtonNewDesign.defaultProps = { |
|
||||||
bgColor: "bg-darkGreenBg", |
|
||||||
bgHoverColor: "hover:bg-gray-900", |
|
||||||
iconBgColor: "bg-darkGreenBg", |
|
||||||
textColor: "text-white", |
|
||||||
border: "border-b-4", |
|
||||||
borderColor: "border-lightBlueBorderColor", |
|
||||||
borderRadius: "rounded", |
|
||||||
fontSize: "text-sm", |
|
||||||
paddingX: "p-4", |
|
||||||
paddingY: "p-4", |
|
||||||
// icons
|
|
||||||
icon: true, |
|
||||||
buttonIcon: arrow, |
|
||||||
iconMarginRight: "mr-2", |
|
||||||
text: "اطلاعات بیشتر", |
|
||||||
}; |
|
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import Comments from "./Comments"; |
||||||
|
|
||||||
|
function CommentDesign() { |
||||||
|
const list = { |
||||||
|
1: <Comments />, |
||||||
|
}; |
||||||
|
const [type, setType] = useState(1); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col items-center"> |
||||||
|
<select |
||||||
|
className="w-20 bg-gray-200 mb-10" |
||||||
|
onChange={(e) => setType(e.target.value)} |
||||||
|
> |
||||||
|
{Object.keys(list).map((option, index) => ( |
||||||
|
<option key={index}>{option}</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
{list[type]} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default CommentDesign; |
||||||
@ -1 +0,0 @@ |
|||||||
/* No CSS *//*# sourceMappingURL=ButtonDesign.css.map */ |
|
||||||
@ -1,9 +0,0 @@ |
|||||||
{ |
|
||||||
"version": 3, |
|
||||||
"mappings": "", |
|
||||||
"sources": [ |
|
||||||
"ButtonDesign.scss" |
|
||||||
], |
|
||||||
"names": [], |
|
||||||
"file": "ButtonDesign.css" |
|
||||||
} |
|
||||||
@ -1,165 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import "./ButtonDesign.scss"; |
|
||||||
|
|
||||||
import greenLeftArrow from "../../assets/icons/green-left-arrow.svg"; |
|
||||||
|
|
||||||
import whiteLeftArrow from "../../assets/icons/white-left-arrow.svg"; |
|
||||||
import whiteRightArrow from "../../assets/icons/white-right-arrow.svg"; |
|
||||||
import whiteUpwardArrow from "../../assets/icons/white-upward-arrow.svg"; |
|
||||||
import whiteDownwardArrow from "../../assets/icons/white-downward-arrow.svg"; |
|
||||||
|
|
||||||
import blackRightArrow from "../../assets/icons/black-right-arrow.svg"; |
|
||||||
import blackLeftArrow from "../../assets/icons/black-left-arrow.svg"; |
|
||||||
import blackUpwardArrow from "../../assets/icons/black-upward-arrow.png"; |
|
||||||
import blackDownwardArrow from "../../assets/icons/black-downward-arrow.png"; |
|
||||||
|
|
||||||
const ButtonDesign = ({ |
|
||||||
buttonBgColor, |
|
||||||
circleArrowBgClr, |
|
||||||
buttonTextColor, |
|
||||||
buttonBorder, |
|
||||||
buttonBorderColor, |
|
||||||
buttonBorderRadius, |
|
||||||
buttonPaddingX, |
|
||||||
buttonPaddingY, |
|
||||||
imageMarginRight, |
|
||||||
imageWidth, |
|
||||||
imageHeight, |
|
||||||
// icons
|
|
||||||
leftArrowWhite, |
|
||||||
rightArrowWhite, |
|
||||||
upwardArrowWhite, |
|
||||||
downwardArrowWhite, |
|
||||||
leftArrowBlack, |
|
||||||
rightArrowBlack, |
|
||||||
upwardArrowBlack, |
|
||||||
downwardArrowBlack, |
|
||||||
buttonBgHoverColor, |
|
||||||
circleArrow, |
|
||||||
}) => { |
|
||||||
return ( |
|
||||||
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> |
|
||||||
<div className="flex items-center justify-between"> |
|
||||||
<h2 className="text-lg text-black">طراحی دکمه های سایت</h2> |
|
||||||
</div> |
|
||||||
<div className="my-4"> |
|
||||||
<p className="leading-10"> |
|
||||||
نام این کامپوننت |
|
||||||
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2"> |
|
||||||
buttonDesign |
|
||||||
</span> |
|
||||||
است. |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
{/* Button UI Design */} |
|
||||||
<div className="flex flex-wrap justify-around items-center"> |
|
||||||
<div> |
|
||||||
<button |
|
||||||
className={`flex items-center text-sm md:text-base transiton duration-200 hover:bg-opacity-70 ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`} |
|
||||||
> |
|
||||||
اطلاعات بیشتر |
|
||||||
{leftArrowWhite && ( |
|
||||||
<img |
|
||||||
src={whiteLeftArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{rightArrowWhite && ( |
|
||||||
<img |
|
||||||
src={whiteRightArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{upwardArrowWhite && ( |
|
||||||
<img |
|
||||||
src={whiteUpwardArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{downwardArrowWhite && ( |
|
||||||
<img |
|
||||||
src={whiteDownwardArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{leftArrowBlack && ( |
|
||||||
<img |
|
||||||
src={blackLeftArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{rightArrowBlack && ( |
|
||||||
<img |
|
||||||
src={blackRightArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{upwardArrowBlack && ( |
|
||||||
<img |
|
||||||
src={blackUpwardArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{downwardArrowBlack && ( |
|
||||||
<img |
|
||||||
src={blackDownwardArrow} |
|
||||||
alt="" |
|
||||||
className={`${imageMarginRight} ${imageWidth} ${imageHeight} `} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{circleArrow && ( |
|
||||||
<span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}> |
|
||||||
<img src={whiteLeftArrow} alt="" className="w-4" /> |
|
||||||
</span> |
|
||||||
)} |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default ButtonDesign; |
|
||||||
|
|
||||||
// color classes that i defined in tailwind.config.js and we can use for text color:
|
|
||||||
// ----> text-grayTextColor
|
|
||||||
// ----> text-white
|
|
||||||
|
|
||||||
// color classes that i defined in tailwind.config.js and we can use for background color:
|
|
||||||
// ----> bg-darkGreenBg
|
|
||||||
// ----> bg-midGrayBgColor
|
|
||||||
|
|
||||||
// color classes that i defined in tailwind.config.js and we can use for border color:
|
|
||||||
// ----> border-lightBlueBorderColor
|
|
||||||
|
|
||||||
ButtonDesign.defaultProps = { |
|
||||||
buttonBgColor: "bg-darkGreenBg", |
|
||||||
buttonBgHoverColor: "bg-gray-900", |
|
||||||
circleArrowBgClr: "bg-darkGreenBg", |
|
||||||
buttonTextColor: "text-white", |
|
||||||
buttonBorder: "border-b-4", |
|
||||||
buttonBorderColor: "border-lightBlueBorderColor", |
|
||||||
buttonBorderRadius: "rounded", |
|
||||||
buttonPaddingX: "px-6", |
|
||||||
buttonPaddingY: "py-4", |
|
||||||
imageMarginRight: "mr-2", |
|
||||||
imageWidth: "w-4", |
|
||||||
imageHeight: "h-4", |
|
||||||
// icons
|
|
||||||
leftArrowWhite: true, |
|
||||||
rightArrowWhite: false, |
|
||||||
upwardArrowWhite: false, |
|
||||||
downwardArrowWhite: false, |
|
||||||
leftArrowBlack: false, |
|
||||||
rightArrowBlack: false, |
|
||||||
upwardArrowBlack: false, |
|
||||||
downwardArrowBlack: false, |
|
||||||
circleArrow: false, |
|
||||||
}; |
|
||||||
@ -0,0 +1,22 @@ |
|||||||
|
export const connectToParent = (list) => { |
||||||
|
let comments = []; |
||||||
|
for (let item of list) { |
||||||
|
comments.push({ ...item, child: [] }); |
||||||
|
} |
||||||
|
|
||||||
|
for (let comment1 of comments) { |
||||||
|
if (comment1.pid !== null) { |
||||||
|
const index = comments.indexOf( |
||||||
|
comments.filter((comment2) => comment2.id === comment1.pid)[0] |
||||||
|
); |
||||||
|
comments[index] = { |
||||||
|
...comments[index], |
||||||
|
child: [...comments[index].child, comment1], |
||||||
|
}; |
||||||
|
} else { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
// comments = comments.filter((comment) => comment.pid === null);
|
||||||
|
console.log(comments); |
||||||
|
}; |
||||||
Loading…
Reference in new issue