diff --git a/src/components/Post.tsx b/src/components/Post.tsx index 405277d..a1a991e 100644 --- a/src/components/Post.tsx +++ b/src/components/Post.tsx @@ -1,7 +1,14 @@ import React, { useState } from 'react' import { Flex, Box, Heading } from '@chakra-ui/core' -import Downvote from '../icons/down-arrow.svg' -import Upvote from '../icons/up-arrow.svg' +import Downvote from '../icons/arrow-down.svg' +import Upvote from '../icons/arrow-up.svg' + +import GiveAward from '../icons/give-award.svg' +import PostSave from '../icons/post-save.svg' +import PostUnsave from '../icons/post-unsave.svg' +import Share from '../icons/arrow-share.svg' +import Comments from '../icons/comments.svg' + import styled from '@emotion/styled' import { useRouter } from 'next/router' @@ -16,6 +23,11 @@ export interface PostData { points: number; } +const FlexCore = styled.div` + display: flex; + flex-direction: row; +` + const Flexbox = styled.div` display: flex; flex-direction: row; @@ -32,12 +44,41 @@ const Flexbox = styled.div` const Rightbox = styled.div` display: flex; - flex-direction: row; height: 100%; align-items: center; flex-direction: column; ` +const PostHeader = styled(FlexCore)` + height: 100%; +` +const PostContent = styled(FlexCore)` + height: 100%; +` +const PostFooter = styled(FlexCore)` + height: 100%; + align-items: center; +` + +const PostButton = styled.div` + display: inline-flex; + padding: 2px 4px; + flex-direction: row; + font-size: 10px; + border-radius: 3px; + transition: background-color 0.2s ease-in; + margin-left: 2px; + + span { + display: inline-block; + margin-left: 2px; + } + + &:hover { + background-color: #e1e2e4; + } +` + export const Post = ({ data }: PostProps) => { const [vote, setVote] = useState(data.points) const router = useRouter() @@ -46,6 +87,10 @@ export const Post = ({ data }: PostProps) => { console.log('handlePostClick') router.push(`/post/${data.id}`) } + + const command = (e: React.SyntheticEvent, cmd: string) => { + console.log('command', cmd) + } const handleVote = (e: React.SyntheticEvent, vote: string) => { e.stopPropagation() @@ -55,7 +100,7 @@ export const Post = ({ data }: PostProps) => { } return ( - handlePostClick()}> + { borderTopRightRadius={2} borderBottomRightRadius={2} > - - {data.title} - - {data.textSnippet} + + + + + handlePostClick()}> + + {data.title} + + {data.textSnippet} + + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + 123 + Comments + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + Give Award + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + Share + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + Save + + + ) diff --git a/src/components/PostFooter.tsx b/src/components/PostFooter.tsx new file mode 100644 index 0000000..a33308a --- /dev/null +++ b/src/components/PostFooter.tsx @@ -0,0 +1,108 @@ +import React, { useState } from 'react' +import { Flex, Box, Heading } from '@chakra-ui/core' +import Downvote from '../icons/arrow-down.svg' +import Upvote from '../icons/arrow-up.svg' + +import GiveAward from '../icons/give-award.svg' +import PostSave from '../icons/post-save.svg' +import PostUnsave from '../icons/post-unsave.svg' +import Share from '../icons/arrow-share.svg' +import Comments from '../icons/comments.svg' + +import styled from '@emotion/styled' +import { useRouter } from 'next/router' + +interface PostProps { + data: PostData; +} + +export interface PostData { + id: string; + title: string; + textSnippet: string; + points: number; +} + +const FlexCore = styled.div` + display: flex; + flex-direction: row; +` + +const PostFooter = styled(FlexCore)` + height: 100%; + align-items: center; +` + +const PostButton = styled.div` + display: inline-flex; + padding: 2px 4px; + flex-direction: row; + font-size: 10px; + border-radius: 3px; + transition: background-color 0.2s ease-in; + margin-left: 2px; + + span { + display: inline-block; + margin-left: 2px; + } + + &:hover { + background-color: #e1e2e4; + } +` + +export const PostFooter = ({ data }: PostProps) => { + const [vote, setVote] = useState(data.points) + const router = useRouter() + + const command = (e: React.SyntheticEvent, cmd: string) => { + console.log('command', cmd) + } + + return ( + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + 123 + Comments + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + Give Award + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + Share + + + + command(e, 'share')} + style={{ fill: '#455A64' }} + width={16} + height={16} + /> + Save + + + + ) +} \ No newline at end of file diff --git a/src/icons/down-arrow.svg b/src/icons/arrow-down.svg similarity index 100% rename from src/icons/down-arrow.svg rename to src/icons/arrow-down.svg diff --git a/src/icons/arrow-share.svg b/src/icons/arrow-share.svg new file mode 100644 index 0000000..d2dc3a6 --- /dev/null +++ b/src/icons/arrow-share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/up-arrow.svg b/src/icons/arrow-up.svg similarity index 100% rename from src/icons/up-arrow.svg rename to src/icons/arrow-up.svg diff --git a/src/icons/awards/atom.svg b/src/icons/awards/atom.svg new file mode 100644 index 0000000..3d30466 --- /dev/null +++ b/src/icons/awards/atom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/darts.svg b/src/icons/awards/darts.svg new file mode 100644 index 0000000..670699c --- /dev/null +++ b/src/icons/awards/darts.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/flame.svg b/src/icons/awards/flame.svg new file mode 100644 index 0000000..52ae3c4 --- /dev/null +++ b/src/icons/awards/flame.svg @@ -0,0 +1,13 @@ + + + + diff --git a/src/icons/awards/helmet.svg b/src/icons/awards/helmet.svg new file mode 100644 index 0000000..938c7dc --- /dev/null +++ b/src/icons/awards/helmet.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + diff --git a/src/icons/awards/lamp.svg b/src/icons/awards/lamp.svg new file mode 100644 index 0000000..5cb61b0 --- /dev/null +++ b/src/icons/awards/lamp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/laurel.svg b/src/icons/awards/laurel.svg new file mode 100644 index 0000000..cfd12fc --- /dev/null +++ b/src/icons/awards/laurel.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/awards/leaves.svg b/src/icons/awards/leaves.svg new file mode 100644 index 0000000..5439174 --- /dev/null +++ b/src/icons/awards/leaves.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/medal.svg b/src/icons/awards/medal.svg new file mode 100644 index 0000000..cda388d --- /dev/null +++ b/src/icons/awards/medal.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/src/icons/awards/meteor.svg b/src/icons/awards/meteor.svg new file mode 100644 index 0000000..fdbad4d --- /dev/null +++ b/src/icons/awards/meteor.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/icons/awards/mission.svg b/src/icons/awards/mission.svg new file mode 100644 index 0000000..0f1e112 --- /dev/null +++ b/src/icons/awards/mission.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/nuclear-plant.svg b/src/icons/awards/nuclear-plant.svg new file mode 100644 index 0000000..096f295 --- /dev/null +++ b/src/icons/awards/nuclear-plant.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/awards/rocket.svg b/src/icons/awards/rocket.svg new file mode 100644 index 0000000..288e0c6 --- /dev/null +++ b/src/icons/awards/rocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/target.svg b/src/icons/awards/target.svg new file mode 100644 index 0000000..91ae746 --- /dev/null +++ b/src/icons/awards/target.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/thunder.svg b/src/icons/awards/thunder.svg new file mode 100644 index 0000000..1ca6885 --- /dev/null +++ b/src/icons/awards/thunder.svg @@ -0,0 +1,6 @@ + + + diff --git a/src/icons/awards/trophy.svg b/src/icons/awards/trophy.svg new file mode 100644 index 0000000..ecc72a0 --- /dev/null +++ b/src/icons/awards/trophy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/awards/vase.svg b/src/icons/awards/vase.svg new file mode 100644 index 0000000..3738ee9 --- /dev/null +++ b/src/icons/awards/vase.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + diff --git a/src/icons/awards/wigwam.svg b/src/icons/awards/wigwam.svg new file mode 100644 index 0000000..613b233 --- /dev/null +++ b/src/icons/awards/wigwam.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/coffee-cup.svg b/src/icons/coffee-cup.svg new file mode 100644 index 0000000..8d4e796 --- /dev/null +++ b/src/icons/coffee-cup.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/comments.svg b/src/icons/comments.svg new file mode 100644 index 0000000..0c5e09b --- /dev/null +++ b/src/icons/comments.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + diff --git a/src/icons/give-award.svg b/src/icons/give-award.svg new file mode 100644 index 0000000..922c438 --- /dev/null +++ b/src/icons/give-award.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/more.svg b/src/icons/more.svg new file mode 100644 index 0000000..bb40469 --- /dev/null +++ b/src/icons/more.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/open-link.svg b/src/icons/open-link.svg new file mode 100644 index 0000000..3648721 --- /dev/null +++ b/src/icons/open-link.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/src/icons/post-save.svg b/src/icons/post-save.svg new file mode 100644 index 0000000..e8134c6 --- /dev/null +++ b/src/icons/post-save.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/src/icons/post-unsave.svg b/src/icons/post-unsave.svg new file mode 100644 index 0000000..c750083 --- /dev/null +++ b/src/icons/post-unsave.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/src/icons/tap.svg b/src/icons/tap.svg new file mode 100644 index 0000000..9917d8c --- /dev/null +++ b/src/icons/tap.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + diff --git a/src/icons/two-circular-arrows.svg b/src/icons/two-circular-arrows.svg index 045a2e5..583c48e 100644 --- a/src/icons/two-circular-arrows.svg +++ b/src/icons/two-circular-arrows.svg @@ -1,50 +1,11 @@ - - - - - + - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/icons/upload-fail.svg b/src/icons/upload-fail.svg index 4fde0b0..5d8aae3 100644 --- a/src/icons/upload-fail.svg +++ b/src/icons/upload-fail.svg @@ -1,42 +1,9 @@ - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +