refactor: delete unused components
This commit is contained in:
Benno Tielen
parent
d6ecb21300
commit
1b19989710
25 changed files with 0 additions and 767 deletions
|
|
@ -1,13 +0,0 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { BannerText } from './BannerText'
|
|
||||||
|
|
||||||
const meta: Meta<typeof BannerText> = {
|
|
||||||
component: BannerText,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof BannerText>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {},
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import styles from './bannerText.module.css'
|
|
||||||
import { faustina, defaultFont } from '@/assets/fonts'
|
|
||||||
|
|
||||||
export const BannerText = () => {
|
|
||||||
return (
|
|
||||||
<div className={faustina.className + ' ' + styles.container}>
|
|
||||||
<div className={styles.catholic}>KATHOLISCHE</div>
|
|
||||||
<div className={styles.name}>
|
|
||||||
PFARREI <br />
|
|
||||||
HEILIGE <br />
|
|
||||||
DREI KÖNIGE <br />
|
|
||||||
</div>
|
|
||||||
<div className={styles.berlin + ' ' + defaultFont.className}>
|
|
||||||
Berlin Nord-Neukölln
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
.catholic {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 35px;
|
|
||||||
position: relative;
|
|
||||||
bottom: -15px;
|
|
||||||
left: 10px;
|
|
||||||
animation: slidein 0.3s backwards;
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100px;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 120px;
|
|
||||||
line-height: 105px;
|
|
||||||
padding: 20px 0;
|
|
||||||
animation: slidein 0.2s backwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.berlin {
|
|
||||||
position: relative;
|
|
||||||
left: 10px;
|
|
||||||
animation: slidein 0.3s backwards;
|
|
||||||
animation-delay: 1.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slidein {
|
|
||||||
from {
|
|
||||||
transform: translateX(-150%);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 420px) {
|
|
||||||
.name {
|
|
||||||
font-size: 42px;
|
|
||||||
line-height: 42px;
|
|
||||||
padding: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catholic {
|
|
||||||
font-size: 18px;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.berlin {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { Card } from './Card'
|
|
||||||
|
|
||||||
const meta: Meta<typeof Card> = {
|
|
||||||
component: Card,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof Card>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {
|
|
||||||
children: <>Some content</>,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import styles from './styles.module.css'
|
|
||||||
|
|
||||||
type CardProps = {
|
|
||||||
children?: JSX.Element | JSX.Element[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Card = ({ children }: CardProps) => {
|
|
||||||
return <div className={styles.card}>{children}</div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
.card {
|
|
||||||
height: 260px;
|
|
||||||
width: 240px;
|
|
||||||
box-shadow: 0 0 11px 0 rgba(79, 66, 79, 0.26);
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
.splash-bg {
|
|
||||||
background-color: #8d5fd3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.splash {
|
|
||||||
height: 80vh;
|
|
||||||
background: url('bg.svg') center center;
|
|
||||||
background-size: cover;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stars {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { HomeBanner } from '@/components/archive/HomeBanner/HomeBanner'
|
|
||||||
|
|
||||||
const meta: Meta<typeof HomeBanner> = {
|
|
||||||
component: HomeBanner,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof HomeBanner>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {
|
|
||||||
stars: 50,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
import React, {
|
|
||||||
forwardRef,
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useImperativeHandle,
|
|
||||||
useRef,
|
|
||||||
} from 'react'
|
|
||||||
import './HomeBanner.css'
|
|
||||||
|
|
||||||
type HomeBannerProps = {
|
|
||||||
children?: React.ReactNode
|
|
||||||
stars: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type HomeBannerHandle = {
|
|
||||||
newStar: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export const HomeBanner = forwardRef<HomeBannerHandle, HomeBannerProps>(
|
|
||||||
function HomeBanner({ children, stars }: HomeBannerProps, ref) {
|
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null)
|
|
||||||
|
|
||||||
const drawStarAtPosition = useCallback(
|
|
||||||
(ctx: CanvasRenderingContext2D, x: number, y: number) => {
|
|
||||||
let r = 2.5 * Math.random()
|
|
||||||
|
|
||||||
//Draw the stars;
|
|
||||||
ctx.beginPath()
|
|
||||||
ctx.fillStyle = 'white'
|
|
||||||
ctx.arc(x, y, r, 0, Math.PI * 2)
|
|
||||||
ctx.fill()
|
|
||||||
},
|
|
||||||
[],
|
|
||||||
)
|
|
||||||
|
|
||||||
const drawStar = useCallback(
|
|
||||||
(ctx: CanvasRenderingContext2D) => {
|
|
||||||
//Random position and size of stars;
|
|
||||||
let x = ctx.canvas.width * Math.random()
|
|
||||||
let y = ctx.canvas.height * Math.random()
|
|
||||||
|
|
||||||
drawStarAtPosition(ctx, x, y)
|
|
||||||
},
|
|
||||||
[drawStarAtPosition],
|
|
||||||
)
|
|
||||||
|
|
||||||
useImperativeHandle(ref, () => {
|
|
||||||
return {
|
|
||||||
newStar() {
|
|
||||||
const context = canvasRef.current?.getContext('2d')
|
|
||||||
if (context) {
|
|
||||||
drawStar(context)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}, [drawStar])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (canvasRef.current) {
|
|
||||||
canvasRef.current.width =
|
|
||||||
containerRef.current?.clientWidth || window.innerWidth
|
|
||||||
canvasRef.current.height = 0.8 * window.innerHeight
|
|
||||||
}
|
|
||||||
const context = canvasRef.current?.getContext('2d')
|
|
||||||
if (context) {
|
|
||||||
for (let i = 0; i < stars; i++) {
|
|
||||||
//Glow effect;
|
|
||||||
context.shadowBlur = 10
|
|
||||||
context.shadowColor = 'white'
|
|
||||||
|
|
||||||
setTimeout(() => drawStar(context), i * 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [drawStar, stars])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="splash-bg" ref={containerRef}>
|
|
||||||
<canvas ref={canvasRef} className="stars"></canvas>
|
|
||||||
<div className="splash">{children}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="1280"
|
|
||||||
height="720"
|
|
||||||
viewBox="0 0 338.66667 190.5"
|
|
||||||
version="1.1"
|
|
||||||
id="svg1"
|
|
||||||
inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
|
|
||||||
sodipodi:docname="bg2.svg"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview1"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#000000"
|
|
||||||
borderopacity="0.25"
|
|
||||||
inkscape:showpageshadow="2"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#d1d1d1"
|
|
||||||
inkscape:document-units="mm"
|
|
||||||
inkscape:lockguides="false"
|
|
||||||
inkscape:zoom="1.0476431"
|
|
||||||
inkscape:cx="869.09368"
|
|
||||||
inkscape:cy="315.94729"
|
|
||||||
inkscape:window-width="3368"
|
|
||||||
inkscape:window-height="1376"
|
|
||||||
inkscape:window-x="72"
|
|
||||||
inkscape:window-y="1107"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="layer1"
|
|
||||||
showgrid="true">
|
|
||||||
<inkscape:grid
|
|
||||||
id="grid1"
|
|
||||||
units="mm"
|
|
||||||
originx="0"
|
|
||||||
originy="0"
|
|
||||||
spacingx="1"
|
|
||||||
spacingy="1"
|
|
||||||
empcolor="#0099e5"
|
|
||||||
empopacity="0.30196078"
|
|
||||||
color="#0099e5"
|
|
||||||
opacity="0.14901961"
|
|
||||||
empspacing="5"
|
|
||||||
dotted="false"
|
|
||||||
gridanglex="30"
|
|
||||||
gridanglez="30"
|
|
||||||
visible="true" />
|
|
||||||
</sodipodi:namedview>
|
|
||||||
<defs
|
|
||||||
id="defs1">
|
|
||||||
<linearGradient
|
|
||||||
id="linearGradient8"
|
|
||||||
inkscape:collect="always">
|
|
||||||
<stop
|
|
||||||
style="stop-color:#b380ff;stop-opacity:1"
|
|
||||||
offset="0"
|
|
||||||
id="stop8" />
|
|
||||||
<stop
|
|
||||||
style="stop-color:#5fd3bc;stop-opacity:0;"
|
|
||||||
offset="1"
|
|
||||||
id="stop9" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="linearGradient6"
|
|
||||||
inkscape:collect="always">
|
|
||||||
<stop
|
|
||||||
style="stop-color:#5fd3bc;stop-opacity:1;"
|
|
||||||
offset="0"
|
|
||||||
id="stop6" />
|
|
||||||
<stop
|
|
||||||
style="stop-color:#5fd3bc;stop-opacity:0;"
|
|
||||||
offset="1"
|
|
||||||
id="stop7" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
inkscape:collect="always"
|
|
||||||
xlink:href="#linearGradient6"
|
|
||||||
id="linearGradient7"
|
|
||||||
x1="11.633274"
|
|
||||||
y1="180.37541"
|
|
||||||
x2="185.67206"
|
|
||||||
y2="-7.3487453"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
gradientTransform="matrix(0.99320034,0,0,1.0022678,1.7447527,6.0845905e-4)" />
|
|
||||||
<linearGradient
|
|
||||||
inkscape:collect="always"
|
|
||||||
xlink:href="#linearGradient8"
|
|
||||||
id="linearGradient9"
|
|
||||||
x1="329.23218"
|
|
||||||
y1="182.37346"
|
|
||||||
x2="226.32838"
|
|
||||||
y2="17.87619"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
gradientTransform="matrix(1.0022746,0,0,1,7.7762959e-4,0)" />
|
|
||||||
</defs>
|
|
||||||
<g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1">
|
|
||||||
<rect
|
|
||||||
style="display:none;fill:#8d5fd3;fill-opacity:1;stroke-width:0.264832"
|
|
||||||
id="rect3"
|
|
||||||
width="338.71875"
|
|
||||||
height="190.45135"
|
|
||||||
x="0.089720808"
|
|
||||||
y="-0.030377436" />
|
|
||||||
<path
|
|
||||||
style="fill:#5fd3bc;fill-opacity:1;stroke-width:0.264583"
|
|
||||||
d="m 123.81562,155.12003 34.30109,-17.03714 40.81875,19.87171 -18.75878,28.51298 -51.8867,-3.49732 z"
|
|
||||||
id="path6" />
|
|
||||||
<path
|
|
||||||
style="fill:#8787de;fill-opacity:1;stroke-width:0.264269"
|
|
||||||
d="m -0.102359,160.41197 72.554869,-32.2325 126.91331,60.8393 -199.03795731,1.50639 z"
|
|
||||||
id="path4"
|
|
||||||
sodipodi:nodetypes="ccccc" />
|
|
||||||
<path
|
|
||||||
style="fill:#afafe9;fill-opacity:1;stroke-width:0.264583"
|
|
||||||
d="m 126.81453,190.57041 c 6.23387,-2.16904 151.87751,-93.709178 151.87751,-93.709178 l 60.12563,39.370248 -0.78639,53.91102 z"
|
|
||||||
id="path5"
|
|
||||||
sodipodi:nodetypes="ccccc" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer2"
|
|
||||||
inkscape:label="Layer 2"
|
|
||||||
style="display:inline"
|
|
||||||
sodipodi:insensitive="true">
|
|
||||||
<rect
|
|
||||||
style="fill:url(#linearGradient9);fill-opacity:1;stroke-width:0.264884"
|
|
||||||
id="rect7"
|
|
||||||
width="339.0639"
|
|
||||||
height="190.00063"
|
|
||||||
x="-0.34187973"
|
|
||||||
y="0.55117559" />
|
|
||||||
<rect
|
|
||||||
style="display:inline;fill:url(#linearGradient7);fill-opacity:1;stroke-width:0.26398"
|
|
||||||
id="rect6"
|
|
||||||
width="338.85544"
|
|
||||||
height="190.7338"
|
|
||||||
x="0.019881012"
|
|
||||||
y="-0.26830679"
|
|
||||||
inkscape:label="rect6" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.4 KiB |
|
|
@ -1,52 +0,0 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { MassTimer } from './MassTimer'
|
|
||||||
import { fn } from '@storybook/test'
|
|
||||||
|
|
||||||
const meta: Meta<typeof MassTimer> = {
|
|
||||||
component: MassTimer,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof MassTimer>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const OneDay: Story = {
|
|
||||||
args: {
|
|
||||||
nextMass: {
|
|
||||||
id: '1',
|
|
||||||
location: {
|
|
||||||
id: "d",
|
|
||||||
name: "St. Richard",
|
|
||||||
address: "Wegstraße 12",
|
|
||||||
updatedAt: "2025-08-23T15:00:00.000Z",
|
|
||||||
createdAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
},
|
|
||||||
date: '2025-08-23T15:00:00.000Z',
|
|
||||||
type: 'WORD',
|
|
||||||
cancelled: false,
|
|
||||||
createdAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
updatedAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
},
|
|
||||||
onStarClick: fn(),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TimeOut: Story = {
|
|
||||||
args: {
|
|
||||||
nextMass: {
|
|
||||||
id: '1',
|
|
||||||
location: {
|
|
||||||
id: "d",
|
|
||||||
name: "St. Richard",
|
|
||||||
address: "Wegstraße 12",
|
|
||||||
updatedAt: "2025-08-23T15:00:00.000Z",
|
|
||||||
createdAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
},
|
|
||||||
date: '2025-08-23T15:00:00.000Z',
|
|
||||||
type: 'WORD',
|
|
||||||
cancelled: false,
|
|
||||||
createdAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
updatedAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
},
|
|
||||||
onStarClick: fn(),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
'use client'
|
|
||||||
|
|
||||||
import { useCountdown } from '@/components/archive/MassTimer/useCountdown'
|
|
||||||
import styles from './masstimer.module.css'
|
|
||||||
import { useState } from 'react'
|
|
||||||
import { MassTimerTooltip } from '@/components/archive/MassTimerTooltip/MassTimerTooltip'
|
|
||||||
import { Worship } from '@/payload-types'
|
|
||||||
|
|
||||||
type MassTimerProps = {
|
|
||||||
nextMass: Worship
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Optional click handler
|
|
||||||
*/
|
|
||||||
onStarClick?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MassTimer = ({ nextMass, onStarClick }: MassTimerProps) => {
|
|
||||||
const [displayTooltip, setDisplayTooltip] = useState<boolean>(false)
|
|
||||||
const [days, hours, minutes, seconds] = useCountdown(
|
|
||||||
new Date(nextMass.date).getTime(),
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.container}>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
className={styles.starButton}
|
|
||||||
type={'button'}
|
|
||||||
onClick={onStarClick}
|
|
||||||
>
|
|
||||||
🌟
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<span
|
|
||||||
onMouseEnter={() => setDisplayTooltip(true)}
|
|
||||||
suppressHydrationWarning={true}
|
|
||||||
>
|
|
||||||
{days}T {hours}S {minutes}M {seconds}S
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
className={styles.tooltip}
|
|
||||||
style={{
|
|
||||||
visibility: displayTooltip ? 'visible' : 'hidden',
|
|
||||||
opacity: displayTooltip ? 1 : 0,
|
|
||||||
transition: 'ease-out 0.2s',
|
|
||||||
}}
|
|
||||||
onMouseLeave={() => setDisplayTooltip(false)}
|
|
||||||
>
|
|
||||||
<MassTimerTooltip nextMass={nextMass} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
.container {
|
|
||||||
position: relative;
|
|
||||||
width: 145px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.starButton {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.starButton:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 35px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Countdown until targetDate,
|
|
||||||
* return an array of four numbers representing the
|
|
||||||
* number of days, hours, minutes and seconds until targetDate
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
const useCountdown = (targetDate: number) => {
|
|
||||||
const [countDown, setCountDown] = useState(targetDate - new Date().getTime())
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (countDown > 0) {
|
|
||||||
setTimeout(() => setCountDown(countDown - 1000), 1000)
|
|
||||||
} else {
|
|
||||||
setCountDown(0)
|
|
||||||
}
|
|
||||||
}, [countDown])
|
|
||||||
|
|
||||||
return getDaysHoursMinutesAndSeconds(countDown)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return an array of four numbers, representing the
|
|
||||||
* numbers days, hours, minutes and seconds
|
|
||||||
*/
|
|
||||||
const getDaysHoursMinutesAndSeconds = (countDown: number) => {
|
|
||||||
// calculate time left
|
|
||||||
const days = Math.floor(countDown / (1000 * 60 * 60 * 24))
|
|
||||||
const hours = Math.floor(
|
|
||||||
(countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
|
|
||||||
)
|
|
||||||
const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60))
|
|
||||||
const seconds = Math.floor((countDown % (1000 * 60)) / 1000)
|
|
||||||
|
|
||||||
return [days, hours, minutes, seconds]
|
|
||||||
}
|
|
||||||
|
|
||||||
export { useCountdown }
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { MassTimerTooltip } from './MassTimerTooltip'
|
|
||||||
|
|
||||||
const meta: Meta<typeof MassTimerTooltip> = {
|
|
||||||
component: MassTimerTooltip,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof MassTimerTooltip>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {
|
|
||||||
nextMass: {
|
|
||||||
id: "12",
|
|
||||||
date: '2024-08-23T15:00:00.000Z',
|
|
||||||
location: {
|
|
||||||
id: "d",
|
|
||||||
name: "St. Richard",
|
|
||||||
address: "Wegstraße 12",
|
|
||||||
updatedAt: "2025-08-23T15:00:00.000Z",
|
|
||||||
createdAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
},
|
|
||||||
type: "MASS",
|
|
||||||
cancelled: false,
|
|
||||||
updatedAt: '2025-08-23T15:00:00.000Z',
|
|
||||||
createdAt: '2025-08-23T15:00:00.000Z'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import styles from './massTimerTooltip.module.css'
|
|
||||||
import clara from './clara.svg'
|
|
||||||
import Image from 'next/image'
|
|
||||||
import { Worship } from '@/payload-types'
|
|
||||||
import { useTime } from '@/hooks/useTime'
|
|
||||||
import { useLocationName } from '@/hooks/useLocationName'
|
|
||||||
import { useCompactDate } from '@/hooks/useCompactDate'
|
|
||||||
|
|
||||||
type MassTimerTooltipProps = {
|
|
||||||
nextMass: Worship
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MassTimerTooltip = ({ nextMass }: MassTimerTooltipProps) => {
|
|
||||||
const time = useTime(nextMass.date)
|
|
||||||
const location = useLocationName(nextMass.location)
|
|
||||||
const date = useCompactDate(nextMass.date)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.tooltip}>
|
|
||||||
<div className={styles.church}>
|
|
||||||
<Image src={clara} width={75} height={75} alt={''} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Die nächste Messe is am {date} um {time} Uhr in {location}.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="120"
|
|
||||||
height="120"
|
|
||||||
viewBox="0 0 120 120"
|
|
||||||
version="1.1"
|
|
||||||
id="svg1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<defs
|
|
||||||
id="defs1" />
|
|
||||||
<g
|
|
||||||
id="layer2">
|
|
||||||
<path
|
|
||||||
id="path1"
|
|
||||||
style="fill:#555555;stroke-width:1.60965"
|
|
||||||
d="m 42.761659,6.1722208 v 3.627996 h -4.879246 v 1.5279092 h 4.866672 V 26.846143 L 21.006255,64.119566 V 186.45283 H 181.97111 V 99.531834 L 112.21714,89.552843 86.964115,74.406226 V 62.509917 h 4.637171 l 0.0032,-1.600218 h -4.640347 v -3.555687 h -1.559346 v 3.624852 h -4.879248 v 1.531053 h 4.866673 V 73.777455 L 66.076412,89.873941 V 64.119566 L 44.321008,26.824136 v -15.49601 h 4.637169 l 0.0032,-1.5970722 h -4.640388 v -3.558833 z"
|
|
||||||
clip-path="none" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 905 B |
|
|
@ -1,32 +0,0 @@
|
||||||
.tooltip {
|
|
||||||
width: 310px;
|
|
||||||
padding: 20px;
|
|
||||||
color: #4d4d4d;
|
|
||||||
background: rgb(244, 244, 244);
|
|
||||||
background: linear-gradient(
|
|
||||||
40deg,
|
|
||||||
rgba(244, 244, 244, 1) 0%,
|
|
||||||
rgba(228, 228, 228, 1) 100%
|
|
||||||
);
|
|
||||||
border: solid 1px #dddddd;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.church {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
border: solid 2px #c2c2c2;
|
|
||||||
transition: background-color 200ms ease-in;
|
|
||||||
overflow: clip;
|
|
||||||
}
|
|
||||||
|
|
||||||
.church:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #fff318;
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { MassTitle } from './MassTitle'
|
|
||||||
|
|
||||||
const meta: Meta<typeof MassTitle> = {
|
|
||||||
component: MassTitle,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof MassTitle>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {
|
|
||||||
title: 'Mittwoch der 19. Woche im Jahreskreis',
|
|
||||||
cancelled: false,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Cancelled: Story = {
|
|
||||||
args: {
|
|
||||||
title: 'Mittwoch der 19. Woche im Jahreskreis',
|
|
||||||
cancelled: true,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import classNames from 'classnames'
|
|
||||||
import { faustina } from '@/assets/fonts'
|
|
||||||
import styles from './styles.module.css'
|
|
||||||
import { Pill } from '@/components/Pill/Pill'
|
|
||||||
|
|
||||||
type MassTitleProps = {
|
|
||||||
title: string
|
|
||||||
cancelled: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export const MassTitle = ({ title, cancelled }: MassTitleProps) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className={styles.mass}>
|
|
||||||
Gottesdienst {cancelled && <Pill>ABGESAGT</Pill>}
|
|
||||||
</div>
|
|
||||||
<h1
|
|
||||||
className={classNames(faustina.className, styles.title, {
|
|
||||||
[styles.cancelled]: cancelled,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
.title {
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-block-start: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mass {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancelled {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import { Meta, StoryObj } from '@storybook/react'
|
|
||||||
import { MenuBaseLayer } from '@/components/archive/MenuBaseLayer/MenuBaseLayer'
|
|
||||||
|
|
||||||
const meta: Meta<typeof MenuBaseLayer> = {
|
|
||||||
component: MenuBaseLayer,
|
|
||||||
}
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof MenuBaseLayer>
|
|
||||||
export default meta
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {},
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import styles from './style.module.css'
|
|
||||||
|
|
||||||
export const MenuBaseLayer = () => {
|
|
||||||
return <div className={styles.background}></div>
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<svg width="952" height="348" viewBox="0 0 952 348" fill="none" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M0 348V0H952V153.638L0 348Z" fill="url(#paint0_linear_13_7)" fill-opacity="0.5"/>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="paint0_linear_13_7" x1="907.131" y1="1.77536e-05" x2="16.2387" y2="104.935" gradientUnits="userSpaceOnUse">
|
|
||||||
<stop stop-color="#A790EA"/>
|
|
||||||
<stop offset="1" stop-color="#3BEBB9"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 455 B |
|
|
@ -1,10 +0,0 @@
|
||||||
.background {
|
|
||||||
width: 100%;
|
|
||||||
height: 340px;
|
|
||||||
background-image: url('bg.svg');
|
|
||||||
background-size: 100% 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue