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

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);