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.
47 lines
1.2 KiB
47 lines
1.2 KiB
import React from "react"; |
|
import { Link } from "react-router-dom"; |
|
import { connect } from "react-redux"; |
|
|
|
function Info({ info, isDark }) { |
|
return ( |
|
<div |
|
className="flex flex-row py-4 px-3 rounded-md mt-4" |
|
style={{ |
|
backgroundColor: info.bg, |
|
border: `1px solid ${info.borderColor}`, |
|
}} |
|
> |
|
<img src={info.icon} alt="" /> |
|
<div className="flex flex-col flex-1 mr-3"> |
|
<strong className="text-base" style={{ color: info.title.color }}> |
|
{info.title.text} |
|
</strong> |
|
<p |
|
className="text-xs lg:text-sm mt-1 lg:mt-2 lg:leading-5" |
|
style={{ |
|
color: isDark ? info.title.color : info.description.color, |
|
}} |
|
> |
|
{info.description.text} |
|
</p> |
|
{info.link && ( |
|
<Link |
|
className="self-end text-xs lg:text-sm font-bold mt-2" |
|
to={info.link.link} |
|
style={{ |
|
color: isDark ? info.title.color : info?.link?.color, |
|
}} |
|
> |
|
{info?.link?.title} |
|
</Link> |
|
)} |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
isDark: state.publicApi.isDark, |
|
}); |
|
|
|
export default connect(mapStateToProps)(Info);
|
|
|