Aarni Halinen
89 lines
1.8 KiB
TypeScript
89 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
import styled from "styled-components";
|
|
import colors from "@theme/colors";
|
|
import Link from "@components/Link";
|
|
import breakpoints from "@theme/breakpoints";
|
|
|
|
interface WrappedCardProps {
|
|
title: string;
|
|
startTime: string;
|
|
text: string;
|
|
link: string;
|
|
image?: {
|
|
src: string;
|
|
alt: string;
|
|
};
|
|
buttonOnClick?: () => void;
|
|
buttonText?: string;
|
|
}
|
|
|
|
const StyledCard = styled.article`
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: ${colors.black};
|
|
margin: 1rem;
|
|
text-align: center;
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
text-overflow: ellipsis;
|
|
margin: 0 0 0.5rem;
|
|
font-weight: 200;
|
|
line-height: 1.375;
|
|
}
|
|
|
|
p:first-of-type {
|
|
color: ${colors.orange1};
|
|
font-weight: 600 !important;
|
|
|
|
@media screen and (max-width: ${breakpoints.medium}) {
|
|
margin: 0.5rem 0;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
padding: 0.5rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
a {
|
|
margin-top: auto;
|
|
|
|
button {
|
|
cursor: pointer;
|
|
padding: 0.8rem 2rem;
|
|
margin: 0.5rem;
|
|
font-size: 0.8rem;
|
|
background: none;
|
|
text-transform: uppercase;
|
|
background-color: ${colors.blue1};
|
|
color: ${colors.white};
|
|
font-weight: 800;
|
|
letter-spacing: 1.5px;
|
|
border: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const WrappedCard: React.FC<WrappedCardProps> = ({
|
|
title, text, link, image, startTime, buttonOnClick, buttonText, ...props
|
|
}) => (
|
|
<StyledCard {...props}>
|
|
{image && (
|
|
<Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
|
|
)}
|
|
<p>{startTime}</p>
|
|
<h3>{title}</h3>
|
|
<p>{text}</p>
|
|
<Link to={link}>
|
|
<button type="button" onClick={buttonOnClick}>
|
|
{buttonText}
|
|
</button>
|
|
</Link>
|
|
</StyledCard>
|
|
);
|
|
|
|
export default WrappedCard;
|