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 = {
|
||||
appName: "im.dev",
|
||||
commonMaxlen: 255,
|
||||
posts: {
|
||||
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 siteConfig from "configs/site-config"
|
||||
import PageContainer1 from "layouts/page-container1"
|
||||
import React from "react"
|
||||
import {HomeSidebar} from 'pages/index'
|
||||
|
||||
const TagsPage = () => (
|
||||
<>
|
||||
<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">
|
||||
</VStack>
|
||||
<HomeSidebar />
|
||||
</HStack>
|
||||
</PageContainer1>
|
||||
</>
|
||||
)
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { HomeSidebar } from 'pages/index'
|
||||
import Card from "components/card"
|
||||
import { config } from "configs/config"
|
||||
import { getSvgIcon } from "components/svg-icon"
|
||||
import { Tag } from "src/types/tag"
|
||||
import { requestApi } from "utils/axios/request"
|
||||
import TagCard from 'src/components/tags/tag-card'
|
||||
|
||||
const tagsFilter = [{
|
||||
name: 'Popular',
|
||||
desc: 'Extremely active tags in terms of posts in the last 7 days.'
|
||||
},
|
||||
{
|
||||
name: "Recently Added",
|
||||
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
|
||||
|
||||
|
||||
@ -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