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