parent
2df6bc963d
commit
ccd8c459ba
10 changed files with 745 additions and 326 deletions
@ -0,0 +1,49 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { components } from "../../../redux/actions"; |
||||||
|
|
||||||
|
function Sidebar({ list, setActive }) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="lg:flex lg:flex-col lg:w-1/6 lg:h-full" |
||||||
|
style={{ direction: "ltr" }} |
||||||
|
> |
||||||
|
<header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"> |
||||||
|
<img |
||||||
|
src={"https://barnamenegar.ir/static/media/white logo 2.7ffbddbc.svg"} |
||||||
|
alt="logo" |
||||||
|
className="w-full" |
||||||
|
/> |
||||||
|
</header> |
||||||
|
<ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full overflow-y-scroll divide-blue-100 border-r border-gray-200"> |
||||||
|
{list |
||||||
|
.sort((a, b) => (a.name > b.name ? 1 : -1)) |
||||||
|
.map((material, index) => ( |
||||||
|
<li |
||||||
|
key={index} |
||||||
|
className="w-full py-3 px-3 font-medium text-md cursor-pointer h-12" |
||||||
|
onClick={() => setActive(material)} |
||||||
|
> |
||||||
|
{material.name} |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
list: state.components.list, |
||||||
|
}); |
||||||
|
|
||||||
|
export default connect(mapStateToProps, { |
||||||
|
setActive: components.activeComponent, |
||||||
|
})(Sidebar); |
||||||
|
|
||||||
|
Sidebar.defaultProps = { |
||||||
|
materials: [ |
||||||
|
{ |
||||||
|
name: "Button", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 7.6 KiB |
@ -0,0 +1,74 @@ |
|||||||
|
import { useState } from "react"; |
||||||
|
import copyIcon from "./copy.png"; |
||||||
|
|
||||||
|
function Code({ code }) { |
||||||
|
const [copied, setCopied] = useState(false); |
||||||
|
const [height, setHeight] = useState(350); |
||||||
|
const copyToClipboard = () => { |
||||||
|
setCopied(true); |
||||||
|
let copyText = document.getElementById(code).innerText; |
||||||
|
/* Select the text field */ |
||||||
|
// copyText.setSelectionRange(0, 99999); /* For mobile devices */
|
||||||
|
|
||||||
|
/* 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"> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<img |
||||||
|
src={copyIcon} |
||||||
|
alt="copy" |
||||||
|
className="w-8 h-8 hover:bg-purple-300 p-1 rounded-md ml-2 cursor-pointer" |
||||||
|
onClick={() => copyToClipboard()} |
||||||
|
/> |
||||||
|
<span |
||||||
|
className={`transition-all duration-500 text-md font-medium text-green-600 ${ |
||||||
|
copied ? "opacity-100" : "opacity-0" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
Copied! |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={`font-sansbold text-lg cursor-pointer ${ |
||||||
|
height === 350 ? "text-blue-500" : "text-red-500" |
||||||
|
}`}
|
||||||
|
onClick={() => setHeight(() => (height == 350 ? "auto" : 350))} |
||||||
|
> |
||||||
|
{height === 350 ? "Read more" : "Close"} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<pre |
||||||
|
className="bg-gray-900 text-green-200 p-3 rounded-md select-text cursor-pointer relative mt-1 h-72 overflow-y-scroll" |
||||||
|
id={code} |
||||||
|
style={{ height: height, direction: "ltr" }} |
||||||
|
> |
||||||
|
{code} |
||||||
|
</pre> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
Code.defaultProps = { |
||||||
|
code: `class HelloMessage extends React.Component {
|
||||||
|
handlePress = () => { |
||||||
|
alert('Hello') |
||||||
|
} |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<p>Hello {this.props.name}</p> |
||||||
|
<button onClick={this.handlePress}>Say Hello</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
ReactDOM.render( |
||||||
|
<HelloMessage name="Taylor" />, |
||||||
|
mountNode |
||||||
|
);`,
|
||||||
|
}; |
||||||
|
|
||||||
|
export default Code; |
||||||
Loading…
Reference in new issue