mirror of https://github.com/sunface/rust-course
sunface
4 years ago
parent
5c65dd3ab3
commit
271f852c01
@ -1,6 +1,7 @@
|
|||||||
import { requestApi } from "./axios/request"
|
import { requestApi } from "../src/utils/axios/request"
|
||||||
|
|
||||||
export let config = {
|
export let config = {
|
||||||
|
appName: "im.dev",
|
||||||
commonMaxlen: 255,
|
commonMaxlen: 255,
|
||||||
posts: {
|
posts: {
|
||||||
titleMaxLen: 128,
|
titleMaxLen: 128,
|
||||||
@ -1,25 +1,106 @@
|
|||||||
import { chakra, HStack, VStack } from "@chakra-ui/react"
|
import {
|
||||||
|
chakra, Flex, Heading, HStack, Text, VStack, Menu,
|
||||||
|
MenuButton,
|
||||||
|
MenuList,
|
||||||
|
MenuItem,
|
||||||
|
IconButton,
|
||||||
|
Divider
|
||||||
|
} from "@chakra-ui/react"
|
||||||
import SEO from "components/seo"
|
import SEO from "components/seo"
|
||||||
import siteConfig from "configs/site-config"
|
import siteConfig from "configs/site-config"
|
||||||
import PageContainer1 from "layouts/page-container1"
|
import PageContainer1 from "layouts/page-container1"
|
||||||
import React from "react"
|
import React, { useEffect, useState } from "react"
|
||||||
import {HomeSidebar} from 'pages/index'
|
import { HomeSidebar } from 'pages/index'
|
||||||
|
import Card from "components/card"
|
||||||
const TagsPage = () => (
|
import { config } from "configs/config"
|
||||||
<>
|
import { getSvgIcon } from "components/svg-icon"
|
||||||
<SEO
|
import { Tag } from "src/types/tag"
|
||||||
title={siteConfig.seo.title}
|
import { requestApi } from "utils/axios/request"
|
||||||
description={siteConfig.seo.description}
|
import TagCard from 'src/components/tags/tag-card'
|
||||||
/>
|
|
||||||
<PageContainer1>
|
const tagsFilter = [{
|
||||||
<HStack alignItems="top" p="4" spacing="3">
|
name: 'Popular',
|
||||||
<VStack alignItems="left" width={["100%", "100%", "70%", "70%"]} spacing="3">
|
desc: 'Extremely active tags in terms of posts in the last 7 days.'
|
||||||
</VStack>
|
},
|
||||||
<HomeSidebar />
|
{
|
||||||
</HStack>
|
name: "Recently Added",
|
||||||
</PageContainer1>
|
desc: "Tags that are recently added, sorted from newest to oldest."
|
||||||
</>
|
},
|
||||||
)
|
{
|
||||||
|
name: "Most Followers",
|
||||||
|
desc: "Tags with the maximum number of followers and posts all time.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "New Proposals",
|
||||||
|
desc: "Follow these tags to cast your vote. We periodically approve tags based on community interest."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const TagsPage = () => {
|
||||||
|
const [filter, setFilter] = useState(tagsFilter[0])
|
||||||
|
const [tags, setTags]: [Tag[], any] = useState([])
|
||||||
|
const getTags = () => {
|
||||||
|
requestApi.get(`/tags`).then((res) => setTags(res.data)).catch(_ => setTags([]))
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getTags()
|
||||||
|
}, [filter])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SEO
|
||||||
|
title={siteConfig.seo.title}
|
||||||
|
description={siteConfig.seo.description}
|
||||||
|
/>
|
||||||
|
<PageContainer1>
|
||||||
|
<HStack alignItems="top" p="4" spacing="3">
|
||||||
|
<VStack alignItems="left" width={["100%", "100%", "70%", "70%"]} spacing="3">
|
||||||
|
<Card>
|
||||||
|
<VStack py="3" spacing="3">
|
||||||
|
<Heading size="md" fontSize="1.6rem">Tags On {config.appName}</Heading>
|
||||||
|
<Text layerStyle="textSecondary">Join communities on {config.appName}. Follow tags that interest you.</Text>
|
||||||
|
</VStack>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<Flex justifyContent="space-between" alignItems="top" p="3">
|
||||||
|
<VStack alignItems="left" width="80%">
|
||||||
|
<Heading size="md">{filter.name}</Heading>
|
||||||
|
<Text fontSize=".9rem">{filter.desc}</Text>
|
||||||
|
<Text fontSize=".9rem" layerStyle="textSecondary">List updated daily at midnight PST.</Text>
|
||||||
|
</VStack>
|
||||||
|
<Menu>
|
||||||
|
<MenuButton
|
||||||
|
as={IconButton}
|
||||||
|
aria-label="Options"
|
||||||
|
icon={<svg fill="none" stroke="currentColor" opacity="0.75" height="1.3rem" viewBox="0 0 55 55"><path d="M2 2h51v21H2V2zm0 30h51v21H2V32z" stroke="stroke-current" strokeWidth="4"></path></svg>}
|
||||||
|
size="xs"
|
||||||
|
variant="ghost"
|
||||||
|
_focus={null}
|
||||||
|
/>
|
||||||
|
<MenuList>
|
||||||
|
{
|
||||||
|
tagsFilter.map(f => <MenuItem onClick={() => setFilter(f)}>
|
||||||
|
{f.name}
|
||||||
|
</MenuItem>)
|
||||||
|
}
|
||||||
|
</MenuList>
|
||||||
|
</Menu>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Divider mt="3" mb="5" />
|
||||||
|
<VStack alignItems="left" spacing="3">
|
||||||
|
{tags.map(t => <TagCard tag={t}/>)}
|
||||||
|
</VStack>
|
||||||
|
</Card>
|
||||||
|
</VStack>
|
||||||
|
<HomeSidebar />
|
||||||
|
</HStack>
|
||||||
|
</PageContainer1>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default TagsPage
|
export default TagsPage
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
package models
|
||||||
|
|
||||||
|
const DefaultTagCover = "https://cdn.hashnode.com/res/hashnode/image/upload/v1605308227907/y6yl3YLT4.png?w=1600&h=320&fit=crop&crop=entropy&auto=compress&auto=compress"
|
||||||
|
|
||||||
|
//users
|
||||||
|
const DefaultAvatar = "https://cdn.hashnode.com/res/hashnode/image/upload/v1600792675173/rY-APy9Fc.png?auto=compress"
|
||||||
|
const DefaultCover = "https://cdn.hashnode.com/res/hashnode/image/upload/v1604243390177/JstCbDgbK.jpeg?w=1600&fit=crop&crop=entropy&auto=compress"
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import {chakra, Heading, Image, Text, HStack,Button, Flex,PropsOf,Link} from "@chakra-ui/react"
|
|
||||||
import { Tag } from "src/types/tag"
|
|
||||||
import { ReserveUrls } from "src/data/reserve-urls"
|
|
||||||
import NextLink from "next/link"
|
|
||||||
|
|
||||||
type Props = PropsOf<typeof chakra.div> & {
|
|
||||||
tag: Tag
|
|
||||||
showActions: boolean
|
|
||||||
onEdit?: any
|
|
||||||
onDelete?: any
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export const TagCard= (props:Props) =>{
|
|
||||||
const {tag,showActions,onEdit,onDelete, ...rest} = props
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex justifyContent="space-between" {...rest}>
|
|
||||||
<NextLink href={`${ReserveUrls.Tags}/${tag.name}`}>
|
|
||||||
<Heading size="sm" display="flex" alignItems="center" cursor="pointer">
|
|
||||||
<Image src={tag.icon} width="43px" mr="2"/>
|
|
||||||
{tag.title}
|
|
||||||
</Heading>
|
|
||||||
</NextLink>
|
|
||||||
{props.showActions && <HStack>
|
|
||||||
<Button size="sm" colorScheme="teal" variant="outline" onClick={onEdit}>Edit</Button>
|
|
||||||
<Button size="sm" onClick={props.onDelete} variant="ghost">Delete</Button>
|
|
||||||
</HStack>}
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TagCard
|
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import React from "react"
|
||||||
|
import {chakra, Heading, Image, Text, HStack,Button, Flex,PropsOf, Box, Tooltip, Tag as ChakraTag, useColorModeValue} from "@chakra-ui/react"
|
||||||
|
import { Tag } from "src/types/tag"
|
||||||
|
import { ReserveUrls } from "src/data/reserve-urls"
|
||||||
|
import NextLink from "next/link"
|
||||||
|
import userCustomTheme from "theme/user-custom"
|
||||||
|
|
||||||
|
type Props = PropsOf<typeof chakra.div> & {
|
||||||
|
tag: Tag
|
||||||
|
showActions?: boolean
|
||||||
|
onEdit?: any
|
||||||
|
onDelete?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const TagCard= (props:Props) =>{
|
||||||
|
const {tag,showActions=false,onEdit,onDelete} = props
|
||||||
|
return (
|
||||||
|
<Flex justifyContent="space-between" alignItems="center" className="hover-bg" p="2">
|
||||||
|
<NextLink href={`${ReserveUrls.Tags}/${tag.name}`}>
|
||||||
|
<HStack cursor="pointer">
|
||||||
|
<Image src={tag.icon} width="43px" mr="2" borderWidth="1px" className="bordered"/>
|
||||||
|
<Box>
|
||||||
|
<Heading size="sm">{tag.title}</Heading>
|
||||||
|
<Tooltip openDelay={300} label={tag.md}><Text layerStyle="textSecondary" fontSize=".85rem" mt="1" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" width={{"sm": "100px","md":"400px","xl":"600px"}}>{tag.md}</Text></Tooltip>
|
||||||
|
</Box>
|
||||||
|
</HStack>
|
||||||
|
</NextLink>
|
||||||
|
{showActions ?
|
||||||
|
<HStack>
|
||||||
|
<Button size="sm" colorScheme="teal" variant="outline" onClick={onEdit}>Edit</Button>
|
||||||
|
<Button size="sm" onClick={onDelete} variant="ghost">Delete</Button>
|
||||||
|
</HStack> :
|
||||||
|
<ChakraTag py="1" px="3" colorScheme="cyan">{tag.postCount} posts</ChakraTag>
|
||||||
|
}
|
||||||
|
</Flex>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TagCard
|
||||||
Loading…
Reference in new issue