mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-11 09:11:07 +08:00
124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import { Card, Link, Spacer, useTheme } from 'components'
|
|
import AttributesTitle from './attributes-title'
|
|
|
|
export interface AttributesProps {
|
|
edit: string
|
|
}
|
|
|
|
const Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(({
|
|
edit, children,
|
|
}) => {
|
|
const theme = useTheme()
|
|
const link = useMemo(() => {
|
|
return `https://github.com/zeit-ui/react/blob/master${edit || '/pages'}`
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<Spacer y={5} />
|
|
<h3>Attributes</h3>
|
|
<Card className="attr">
|
|
{children}
|
|
</Card>
|
|
<Spacer y={1} />
|
|
<Link color target="_blank" className="attributes-link" href={link} rel="nofollow">Edit this page on GitHub</Link>
|
|
|
|
<style global jsx>{`
|
|
.attr table {
|
|
margin-right: ${theme.layout.gap};
|
|
}
|
|
|
|
.attr pre {
|
|
margin: 0;
|
|
}
|
|
|
|
.attr h4.title {
|
|
margin-top: calc(${theme.layout.gap} * 2.2);
|
|
}
|
|
|
|
.attr h4.title:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.attributes-link {
|
|
float: right;
|
|
}
|
|
|
|
.attr table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.attr thead th td {
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.attr tbody tr td {
|
|
height: 3.333rem;
|
|
}
|
|
|
|
.attr th, .attr td {
|
|
padding: 0 0.625rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.attr th {
|
|
height: 2.5rem;
|
|
color: ${theme.palette.accents_5};;
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
background: ${theme.palette.accents_1};
|
|
border-bottom: 1px solid ${theme.palette.border};
|
|
border-top: 1px solid ${theme.palette.border};
|
|
}
|
|
|
|
.attr th:nth-child(1) {
|
|
border-bottom: 1px solid ${theme.palette.border};
|
|
border-left: 1px solid ${theme.palette.border};
|
|
border-radius: 4px 0 0 4px;
|
|
border-top: 1px solid ${theme.palette.border};
|
|
}
|
|
|
|
.attr th:last-child {
|
|
border-bottom: 1px solid ${theme.palette.border};
|
|
border-radius: 0 4px 4px 0;
|
|
border-right: 1px solid ${theme.palette.border};
|
|
border-top: 1px solid ${theme.palette.border};
|
|
}
|
|
|
|
.attr tr td {
|
|
border-bottom: 1px solid ${theme.palette.border};
|
|
color: ${theme.palette.accents_6};
|
|
font-size: 0.875rem;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.attr td:nth-child(1) {
|
|
border-left: 1px solid transparent;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.attr {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.attr::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
})
|
|
|
|
type AttributesComponent<P = {}> = React.FC<P> & {
|
|
Title: typeof AttributesTitle
|
|
}
|
|
|
|
export default Attributes as AttributesComponent<AttributesProps>
|