From 1ace04985cfe08680acd4fed6d0bab2dee1fc19e Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Fri, 25 Mar 2022 13:01:46 -0700 Subject: [PATCH] client: add file dropdown to post view --- .../file-dropdown/dropdown.module.css | 69 +++++++++++++++++++ client/components/file-dropdown/index.tsx | 64 +++++++++++++++++ .../components/file-tree/file-tree.module.css | 14 +++- client/components/post-page/index.tsx | 27 +++++--- .../components/post-page/post-page.module.css | 28 +++++--- 5 files changed, 182 insertions(+), 20 deletions(-) create mode 100644 client/components/file-dropdown/dropdown.module.css create mode 100644 client/components/file-dropdown/index.tsx diff --git a/client/components/file-dropdown/dropdown.module.css b/client/components/file-dropdown/dropdown.module.css new file mode 100644 index 00000000..db133567 --- /dev/null +++ b/client/components/file-dropdown/dropdown.module.css @@ -0,0 +1,69 @@ +.wrapper { + display: flex; + flex-direction: row; + align-items: center; +} + +.dropdownButton { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; +} + +.content { + list-style: none; + width: 100%; + padding: 0 var(--gap); + margin: 0; +} + +.content li { + transition: var(--transition); + border-radius: var(--radius); + margin: 0; + padding: 2px var(--gap); +} + +.content li:hover, +.content li:focus { + background-color: var(--lighter-gray); +} + +.content li a { + display: block; + height: 100%; + width: min-content; +} + +.button { + border-radius: none !important; +} + +.content li .fileIcon { + display: inline-block; + margin-right: var(--gap-half); +} + +.content li .fileTitle { + font-size: 1rem; +} + +.content li::before { + content: ""; + padding: 0; + margin: 0; +} + +.cardContent { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: var(--gap-half); + padding-top: 200px; +} + +@media screen and (max-width: 82rem) { +} diff --git a/client/components/file-dropdown/index.tsx b/client/components/file-dropdown/index.tsx new file mode 100644 index 00000000..bcf5c963 --- /dev/null +++ b/client/components/file-dropdown/index.tsx @@ -0,0 +1,64 @@ +import { Button, Link, Note, Popover, Spacer } from '@geist-ui/core' +import FileIcon from '@geist-ui/icons/fileText' +import CodeIcon from '@geist-ui/icons/fileLambda' +import styles from './dropdown.module.css' +import { useCallback, useEffect, useState } from "react" +import { codeFileExtensions } from "@lib/constants" +import ChevronDown from '@geist-ui/icons/chevronDown' +import ShiftBy from "@components/shift-by" +import type { File } from '@lib/types' +import FileTree from '@geist-ui/icons/list' + +type Item = File & { + icon: JSX.Element +} + +const FileDropdown = ({ + files +}: { + files: File[] +}) => { + const [expanded, setExpanded] = useState(false) + const [items, setItems] = useState([]) + useEffect(() => { + const newItems = files.map(file => { + const extension = file.title.split('.').pop() + if (codeFileExtensions.includes(extension || '')) { + return { + ...file, + icon: + } + } else { + return { + ...file, + icon: + } + } + }) + setItems(newItems) + }, [files]) + + const content = useCallback(() => (
    + {items.map(item => ( +
  • setExpanded(false)}> + + + {item.icon} + {item.title} + +
    • + ))} +
+ ), [items]) + + // a list of files with an icon and a title + return ( + + ) +} + +export default FileDropdown \ No newline at end of file diff --git a/client/components/file-tree/file-tree.module.css b/client/components/file-tree/file-tree.module.css index 09d7f77f..74eb1863 100644 --- a/client/components/file-tree/file-tree.module.css +++ b/client/components/file-tree/file-tree.module.css @@ -17,11 +17,21 @@ .fileTree li { transition: var(--transition); border-radius: var(--radius); - padding: var(--gap-half) 0; margin: 0; + padding: var(--gap-half) 0; } -.fileTree li:hover { +.fileTree li a { + margin: 0px; + display: block; + width: 100%; + height: 100%; + padding: var(--gap-half); +} + +.fileTree li:hover, +.fileTree li:focus, +.fileTree li:active { background: var(--lighter-gray); } diff --git a/client/components/post-page/index.tsx b/client/components/post-page/index.tsx index 8816264a..bdb58e47 100644 --- a/client/components/post-page/index.tsx +++ b/client/components/post-page/index.tsx @@ -6,11 +6,12 @@ import styles from './post-page.module.css' import homeStyles from '@styles/Home.module.css' import type { File, Post } from "@lib/types" -import { Page, Button, Text, Badge, Tooltip, Spacer } from "@geist-ui/core" +import { Page, Button, Text, Badge, Tooltip, Spacer, ButtonDropdown, ButtonGroup } from "@geist-ui/core" import ShiftBy from "@components/shift-by" import { useMemo, useState } from "react" import timeAgo from "@lib/time-ago" -import FileTree from "@components/file-tree" +import Archive from '@geist-ui/icons/archive' +import FileDropdown from "@components/file-dropdown" type Props = { post: Post @@ -51,18 +52,24 @@ const PostPage = ({ post }: Props) => { {/* {!isLoading && } */}
-
+ {post.title} - +
{time} - -
- +
+ + + + + + + +
- {post.files.length > 1 && } + {/* {post.files.length > 1 && } */} {post.files.map(({ id, content, title }: File) => ( * { margin-left: var(--gap); + margin-bottom: var(--gap-quarter); } -@media screen and (max-width: 680px) { +.header .buttons { + display: flex; + justify-content: space-between; + align-items: flex-end; +} + +@media screen and (max-width: 900px) { .header { flex-direction: column; } +} - .header .titleAndBadge { +@media screen and (max-width: 700px) { + .header .title { flex-direction: column; padding-bottom: var(--gap-double); } - .header .titleAndBadge span { + .header .title .badges > * { margin-left: 0; - margin-bottom: var(--gap); + } + + .header .title .badges { display: flex; - justify-content: space-around; - width: 100%; + flex-direction: row; + justify-content: space-between; + width: 80%; } }