71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import Board from "react-trello";
|
|
import WhiteBoardCard from "../../components/white-board-card/white-board-card.component";
|
|
import WhiteBoardLeftSiderContainer from "../../components/white-board-left-sider/white-board-left-sider.container";
|
|
import { Layout, Icon, Menu } from "antd";
|
|
|
|
export default function WhiteBoardPage({ whiteBoardLeftSiderVisible }) {
|
|
const data = {
|
|
lanes: [
|
|
{
|
|
id: "lane1",
|
|
title: "Planned Tasks",
|
|
label: "2/2",
|
|
cards: [
|
|
{
|
|
id: "Card1",
|
|
title: "Write Blog",
|
|
description: "Can AI make memes",
|
|
label: "30 mins"
|
|
},
|
|
{
|
|
id: "Card2",
|
|
title: "Pay Rent",
|
|
description: "Transfer via NEFT",
|
|
label: "5 mins",
|
|
metadata: { sha: "be312a1" }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id: "lane2",
|
|
title: "Completed",
|
|
label: "0/0",
|
|
cards: []
|
|
}
|
|
]
|
|
};
|
|
|
|
const { Sider, Content } = Layout;
|
|
return (
|
|
<Layout>
|
|
<Sider
|
|
breakpoint="lg"
|
|
collapsedWidth="0"
|
|
onBreakpoint={broken => {
|
|
//console.log(broken);
|
|
}}
|
|
onCollapse={(collapsed, type) => {
|
|
//console.log(collapsed, type);
|
|
}}
|
|
>
|
|
<WhiteBoardLeftSiderContainer />
|
|
</Sider>
|
|
|
|
<Content>
|
|
<Board
|
|
tagStyle={{ fontSize: "80%" }}
|
|
data={data}
|
|
draggable
|
|
components={{ Card: WhiteBoardCard }}
|
|
onCardClick={(cardId, metadata) =>
|
|
alert(
|
|
`Card with id:${cardId} clicked. Has metadata.id: ${metadata.id}`
|
|
)
|
|
}
|
|
/>
|
|
</Content>
|
|
</Layout>
|
|
);
|
|
}
|