Files
sanasto-app/components/pages/Home.jsx
Leo Giovanetti ab18e78039 Adding Dark mode 🌗
2020-12-25 13:05:21 -03:00

33 lines
1014 B
JavaScript

import Store from '../../store';
import Card from '../ui/Card';
import Content from '../ui/Content';
import * as selectors from '../../store/selectors';
const HomeCard = ({ title, type, text, author, image }) => (
<Card className="my-4">
<div>
<img className="rounded-t-xl h-32 w-full object-cover" src={image} />
</div>
<div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
<h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">{type}</h4>
<h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">{title}</h2>
<p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">{text}</p>
</div>
</Card>
);
const Home = ({ selected }) => {
const homeItems = Store.useState(selectors.getHomeItems);
return (
<Content visible={selected} className="p-4 dark:bg-black">
{homeItems.map((i, index) => (
<HomeCard {...i} key={index} />
))}
</Content>
);
};
export default Home;