fca1071941
## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint`
52 lines
980 B
TypeScript
52 lines
980 B
TypeScript
import { Anchor, Text } from '@mantine/core'
|
|
|
|
type Props = {
|
|
title: string
|
|
description: string
|
|
link: string
|
|
}
|
|
|
|
const Card = (props: Props) => {
|
|
return (
|
|
<Anchor
|
|
href={props.link}
|
|
target="_blank"
|
|
sx={{
|
|
border: '1px solid #eaeaea',
|
|
margin: '1rem',
|
|
padding: '1.5rem',
|
|
borderRadius: '10px',
|
|
textAlign: 'left',
|
|
color: 'black',
|
|
maxWidth: '300px',
|
|
transition: 'all 0.3s ease-in-out',
|
|
'&:hover': {
|
|
borderColor: '#0070f3',
|
|
color: '#0070f3',
|
|
},
|
|
}}
|
|
>
|
|
<Text
|
|
component="h2"
|
|
sx={{
|
|
fontSize: '1.5rem',
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
{props.title}
|
|
</Text>
|
|
<Text
|
|
component="p"
|
|
sx={{
|
|
fontSize: '1rem',
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
{props.description}
|
|
</Text>
|
|
</Anchor>
|
|
)
|
|
}
|
|
|
|
export default Card
|