- import {FC} from 'react';
- import styled from 'styled-components';
-
- const Base = styled('div')({
- borderRadius: '0.25rem',
- position: 'relative',
- padding: '1rem',
- boxSizing: 'border-box',
- '::before': {
- content: "''",
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- boxSizing: 'border-box',
- borderRadius: 'inherit',
- pointerEvents: 'none',
- backgroundColor: 'white',
- mixBlendMode: 'screen',
- opacity: 0.125,
- },
- '::after': {
- content: "''",
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- boxSizing: 'border-box',
- borderRadius: 'inherit',
- pointerEvents: 'none',
- border: '1px solid',
- opacity: 0.5,
- },
- })
-
- const Content = styled('div')({
- position: 'relative',
- })
-
- type Props = {
- className?: string,
- }
-
- const Card: FC<Props> = ({
- children,
- ...etcProps
- }) => {
- return (
- <Base
- {...etcProps}
- >
- <Content>
- {children}
- </Content>
- </Base>
- )
- }
-
- export default Card
|