diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index cfb415b..52ea2f1 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import customParseFormat from 'dayjs/plugin/customParseFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
import {
Center,
@@ -23,6 +24,7 @@ import {
Logo,
Title,
EventName,
+ EventDate,
LoginForm,
LoginSection,
Info,
@@ -40,6 +42,7 @@ import timezones from 'res/timezones.json';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(customParseFormat);
+dayjs.extend(relativeTime);
const Event = (props) => {
const timeFormat = useSettingsStore(state => state.timeFormat);
@@ -283,6 +286,7 @@ const Event = (props) => {
{(!!event || isLoading) ? (
<>
{event?.name}
+ {event?.created && `Created ${dayjs.unix(event?.created).fromNow()}`}
navigator.clipboard?.writeText(`https://crab.fit/${id}`)
.then(() => {
diff --git a/crabfit-frontend/src/pages/Event/eventStyle.ts b/crabfit-frontend/src/pages/Event/eventStyle.ts
index f5f3354..2727b99 100644
--- a/crabfit-frontend/src/pages/Event/eventStyle.ts
+++ b/crabfit-frontend/src/pages/Event/eventStyle.ts
@@ -24,7 +24,7 @@ export const Title = styled.span`
export const EventName = styled.h1`
text-align: center;
font-weight: 800;
- margin: 20px 0 14px;
+ margin: 20px 0 5px;
${props => props.isLoading && `
&:after {
@@ -39,6 +39,28 @@ export const EventName = styled.h1`
`}
`;
+export const EventDate = styled.span`
+ display: block;
+ text-align: center;
+ font-size: 14px;
+ opacity: .8;
+ margin: 0 0 10px;
+ font-weight: 500;
+ letter-spacing: .01em;
+
+ ${props => props.isLoading && `
+ &:after {
+ content: '';
+ display: inline-block;
+ height: 1em;
+ width: 200px;
+ max-width: 100%;
+ background-color: ${props.theme.loading};
+ border-radius: 3px;
+ }
+ `}
+`;
+
export const LoginForm = styled.form`
display: grid;
grid-template-columns: 1fr 1fr 100px;