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