import React, { useState } from "react"; import { DropdownMenu, DropdownMenuItem } from "components/dropdown-menu"; import ModalConfirm from "components/modals/ModalConfirm"; import AddAnnouncementForm from "containers/AddAnnouncementForm"; import AddPostForm from "containers/AddPostForm"; import AnnouncementsContainer from "containers/AnnoucementsContainer"; import PostFilters from "containers/PostFilters"; import PostsContainer from "containers/PostsContainer"; const Home = () => { const [showEndDiscussionConfirm, setShowEndDiscussionConfirm] = useState( false ); const onRenameProgramPoint = () => { console.log("renameProgramPoint"); }; const onEndDiscussion = () => { console.log("endDiscussion"); setShowEndDiscussionConfirm(true); }; const onEndProgramPoint = () => { console.log("endProgramPoint"); }; return ( <> <article className="container container--wide pt-8 lg:py-24 cf2021"> <section className="cf2021__video space-y-8"> <div className="flex items-center justify-between mb-4 lg:mb-8"> <h1 className="head-alt-md lg:head-alt-lg mb-0"> Bod č. 1: Programové priority Pirátské strany pro sněmovní volby 2021 </h1> <DropdownMenu right triggerSize="lg"> <DropdownMenuItem onClick={onRenameProgramPoint} icon="ico--edit-pencil" title="Přejmenovat bod programu" titleSize="base" iconSize="base" /> <DropdownMenuItem onClick={onEndDiscussion} icon="ico--bubbles" title="Ukončit rozpravu" titleSize="base" iconSize="base" /> <DropdownMenuItem onClick={onEndProgramPoint} icon="ico--switch" title="Ukončit bod programu" titleSize="base" iconSize="base" /> )} </DropdownMenu> </div> <iframe width="100%" height="500" src="https://www.youtube.com/embed/73jJLspL8o8" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" title="Video stream" ></iframe> </section> <section className="cf2021__notifications"> <div className="lg:card lg:elevation-10"> <div className="lg:card__body pb-2 lg:py-6"> <h2 className="head-heavy-sm">Oznámení</h2> </div> <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" /> <AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" /> </div> </section> <section className="cf2021__posts"> <div className="flex flex-col xl:flex-row xl:justify-between xl:items-center mb-4"> <h2 className="head-heavy-sm whitespace-no-wrap"> Příspěvky v rozpravě </h2> <PostFilters /> </div> <PostsContainer className="container-padding--zero lg:container-padding--auto" /> <AddPostForm className="my-8 space-y-4" /> </section> </article> <ModalConfirm isOpen={showEndDiscussionConfirm} onConfirm={() => setShowEndDiscussionConfirm(false)} onCancel={() => setShowEndDiscussionConfirm(false)} title="Ukončit rozpravu?" yesActionLabel="Ukončit" > Opravdu chcete ukončit rozpravu? </ModalConfirm> </> ); }; export default Home;