You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.1 KiB
54 lines
2.1 KiB
import React from "react"; |
|
import { connect } from "react-redux"; |
|
import Code from "../../../components/Code"; |
|
|
|
function Main({ activeComponent }) { |
|
return ( |
|
<div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200"> |
|
<header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header> |
|
<section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col"> |
|
<h1 className="font-bold text-3xl text-left"> |
|
{activeComponent?.content?.name} |
|
</h1> |
|
<span className="font-bold text-xs mb-10 text-left block"> |
|
{activeComponent?.name && `Designed by: ${activeComponent?.author}`} |
|
</span> |
|
{activeComponent?.content?.component} |
|
{activeComponent?.content?.code && ( |
|
<Code code={activeComponent?.content?.code} /> |
|
)} |
|
{/* <h2>Props</h2> */} |
|
{activeComponent?.props?.length > 0 && ( |
|
<table className="w-full" style={{ direction: "ltr" }}> |
|
<thead> |
|
<tr> |
|
<th className="font-bold text-lg">Name</th> |
|
<th className="font-bold text-lg">Type</th> |
|
<th className="font-bold text-lg">Required</th> |
|
<th className="font-bold text-lg">Default value</th> |
|
<th className="font-bold text-lg">Description</th> |
|
</tr> |
|
</thead> |
|
<tbody className="w-full divided divide-y"> |
|
{activeComponent?.props?.map((prop, index) => ( |
|
<tr key={index} className=""> |
|
<td className="py-3 text-center">{prop.name}</td> |
|
<td className="py-3 text-center">{prop.type}</td> |
|
<td className="py-3 text-center">{prop.required}</td> |
|
<td className="py-3 text-center">{prop.defaultValue}</td> |
|
<td className="py-3 text-center">{prop.description}</td> |
|
</tr> |
|
))} |
|
</tbody> |
|
</table> |
|
)} |
|
</section> |
|
</div> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
activeComponent: state.components.activeComponent, |
|
}); |
|
|
|
export default connect(mapStateToProps, {})(Main);
|
|
|