diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 1c3767e..be32248 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -9,7 +9,7 @@ margin: 1rem 1rem; &__title { - font-weight: bold; + text-align: center; font-size: 1.4rem; padding: 1rem; display: flex; @@ -25,4 +25,11 @@ font-weight: lighter; padding: 1rem; } + + &__datetime { + color: $orange1; + text-align: center; + font-size: 0.8rem; + font-weight: bold; + } } diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index ecb311e..3d66ec3 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -4,6 +4,7 @@ import "./Card.scss"; export interface CardProps { title: string; + start_time: string; text: string; image: string; } @@ -12,8 +13,17 @@ export interface CardState {} class Card extends React.Component { render() { const { title, text, image } = this.props; + let options = { + day: "numeric", + month: "numeric", + year: "numeric", + hour: "numeric", + minute: "2-digit" + }; + const datetime = new Date(this.props.start_time).toLocaleString("fi-FI", options); return ( +
{datetime}
{title}
{text}
diff --git a/src/models/Event.ts b/src/models/Event.ts index 2143739..b16ca82 100644 --- a/src/models/Event.ts +++ b/src/models/Event.ts @@ -6,6 +6,7 @@ export interface Event { id: number; title: string; description: string; + start_time: string; } export async function getEvents(): Promise {