diff --git a/next/app/(main)/events/[slug]/page.tsx b/next/app/(main)/events/[slug]/page.tsx new file mode 100644 index 0000000..72ff1e1 --- /dev/null +++ b/next/app/(main)/events/[slug]/page.tsx @@ -0,0 +1,329 @@ +import IconDownload from "@/assets/svg/IconDownload"; +import AudioFilePlayer from "@/components/AudioFilePlayer"; +import Button from "@/components/Button"; +import HoverText from "@/components/HoverText"; +import RenderTipTap from "@/components/RenderTipTap"; +import { Api } from "@/lib/api"; +import { + ItemsEvents, + ItemsPosts, + ItemsPostsDirectusUsers1, + ItemsPrograms, + Users, +} from "@/lib/api/data-contracts"; +import Colors from "@/lib/Colors"; +import Fonts from "@/lib/Fonts"; +import Metrics from "@/lib/Metrics"; +import moment from "moment"; +import Image from "next/image"; +import { notFound } from "next/navigation"; +import { Text, View } from "@/lib/server-react-native"; +import StyleSheet from "react-native-media-query"; +import IconShare from "../../../../assets/svg/IconShare"; +import { logError } from "@/lib/loging"; +import DownloadLogo from "../../geschichte/DownloadLogo"; + +const { ids, styles } = StyleSheet.create({ + container: { + maxWidth: 1280, + width: "100%", + alignItems: "center", + alignSelf: "center", + }, + imageContainer: { + width: "100%", + }, + postContainer: { + width: "75%", + }, + border: { + borderBlockColor: Colors.black, + borderRadius: 9, + borderWidth: 1, + alignSelf: "flex-start", + flexDirection: "row", + alignItems: "center", + paddingVertical: 3, + paddingHorizontal: 6, + }, + title: { + ...Fonts.style.h1, + color: "white", + textAlign: "center", + paddingBottom: Metrics.doubleBaseMargin, + }, + sendungsInfo: { ...Fonts.style.text, color: "black" }, + image: { width: "100%", borderRadius: 9 }, +}); + +async function getEvent(slug) { + try { + const itemResponse = await Api.readItemsEvents( + { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + filter: JSON.stringify({ + slug: { + _eq: slug, + }, + }), + fields: ["*", "logos.directus_files_id"], + }, + { + next: { + tags: + process.env.NODE_ENV === "production" ? ["collection"] : undefined, + }, + cache: + process.env.NODE_ENV === "production" ? "force-cache" : "no-store", + } + ); + let item: ItemsEvents[] = itemResponse.data.data; + console.log("event", item); + + return item[0]; + } catch (error) { + logError(error); + + notFound(); + } +} + +export default async function DynamicPage({ params }) { + const event = await getEvent(params.slug); + + return ( + + + + + {event.title} + + + {event.title} + + + {event.title_info} + + + + + {event.content && ( + + )} + + {/* */} + {/* + + {program.name} + + + + {"Von "} + {post.authors.map((item: ItemsPostsDirectusUsers1, index) => { + let user: Users = item.directus_users_id as Users; + return ( + {`${index ? " &" : ""} ${user.first_name} ${ + user.last_name + }`} + ); + })} + + {`am ${moment(post.date).format("DD. MMMM YY")}`} + + + + {post.title} + + {post.image && ( + + {post.title} + {post.imageTitle && ( + + + {"Foto: " + post.imageTitle} + + + {post.imageText && ( + + {post.imageText} + + )} + + )} + + )} + + {post.content && } + {post.audio && ( + + + + )} + + {post.audio && ( + <> + + + + )} + + + + + + + */} + + + + {"Danke für die finanzielle Unterstützung:"} + + {event && event.logos && ( + + {event.logos.map((item, index) => { + return ( + + + {"partner" + + + ); + })} + + )} + + + + ); +} diff --git a/next/components/HoverText.tsx b/next/components/HoverText.tsx index a5afce6..518850c 100644 --- a/next/components/HoverText.tsx +++ b/next/components/HoverText.tsx @@ -52,7 +52,7 @@ const HoverText = ({ if (href) { return ( - + {pressable} ); diff --git a/next/components/RenderTipTap/Link.tsx b/next/components/RenderTipTap/Link.tsx new file mode 100644 index 0000000..3b55afd --- /dev/null +++ b/next/components/RenderTipTap/Link.tsx @@ -0,0 +1,39 @@ +"use client"; +import { ItemsInfoBox, ItemsQuote } from "@/lib/api/data-contracts"; +import Colors from "@/lib/Colors"; +import Fonts from "@/lib/Fonts"; +import Metrics from "@/lib/Metrics"; +import { Text, View } from "@/lib/server-react-native"; +import RenderTipTap from "./RenderTipTap"; +import { useState } from "react"; + +export interface LinkProps { + label: any; + color: any; + hoverColor: any; + href: string; +} + +const Link = ({ label, color, hoverColor, href }: LinkProps) => { + const [hover, setHover] = useState(false); + + return ( + setHover(true)} + onMouseLeave={() => setHover(false)} + > + {label} + + ); +}; + +export default Link; diff --git a/next/components/RenderTipTap/RenderTipTap.tsx b/next/components/RenderTipTap/RenderTipTap.tsx index 9e9e598..774ce54 100644 --- a/next/components/RenderTipTap/RenderTipTap.tsx +++ b/next/components/RenderTipTap/RenderTipTap.tsx @@ -18,6 +18,8 @@ import InfoBox from "./InfoBox"; import Quote from "./Quote"; import { logError } from "@/lib/loging"; import ImageBox from "../ImageBox"; +import Colors from "@/lib/Colors"; +import Link from "./Link"; /** * this is an implementation of the renderer interface using html native tags, a similar renderer can be written for react-native or using any UI library @@ -181,17 +183,56 @@ const Heading = (props: { } }; -const markHandlers: TipTapMarkHandlers = { - link: (props) => ( - - {props.children} - - ), - bold: (props) => {props.children}, - italic: (props) => {props.children}, - underline: (props) => {props.children}, - strike: (props) => {props.children}, - code: (props) => {props.children}, +const markHandlers = (topProps) => { + return { + link: (props) => { + // console.log("linkj props", props.children.props.node.type); + // console.log("linkj topProps", topProps); + + let label = + props.children.props.node.type === "text" + ? props.children.props.node.text + : props.children; + return ( + + // setHover(true)} + // // onMouseLeave={() => setHover(false)} + // > + // {props.children} + // + ); + }, + bold: (props) => {props.children}, + italic: (props) => {props.children}, + underline: (props) => {props.children}, + strike: (props) => {props.children}, + code: (props) => {props.children}, + }; }; const nodeHandlers: TipTapNodeHandlers = { @@ -266,17 +307,19 @@ const nodeHandlers: TipTapNodeHandlers = { }, }; -const handlers: TipTapRenderHandlers = { - ...markHandlers, - ...nodeHandlers, +const handlers = (topProps) => { + return { + ...markHandlers(topProps), + ...nodeHandlers, + }; }; -export const RenderTipTap = ({ content }) => { +export const RenderTipTap = ({ content, topProps }) => { // const contentJson = useMemo(() => JSON.parse(content), [content]); return (
- +
); }; diff --git a/next/lib/Colors.ts b/next/lib/Colors.ts index e9a85a8..6565480 100644 --- a/next/lib/Colors.ts +++ b/next/lib/Colors.ts @@ -3,6 +3,8 @@ export default { green: "#00C9BF", lightGreen: "#E3F9F8", hoverGreen: "#408a87", + yellow: "#F6A000", + lightYellow: "#FED000", red: "#FF686B", black: "#000", white: "#fff", diff --git a/next/lib/Fonts.ts b/next/lib/Fonts.ts index 7b0c623..ccd6e7b 100644 --- a/next/lib/Fonts.ts +++ b/next/lib/Fonts.ts @@ -92,7 +92,7 @@ export const style: Record = { TTtextLink: { fontFamily: type.bold, fontSize: size.text, - lineHeight: 20, + lineHeight: 1.4, letterSpacing: 0, fontFeatureSettings: '"tnum" on', }, diff --git a/next/lib/api/data-contracts.ts b/next/lib/api/data-contracts.ts index a8a3526..6c8a2c9 100644 --- a/next/lib/api/data-contracts.ts +++ b/next/lib/api/data-contracts.ts @@ -704,6 +704,8 @@ export interface ItemsEvents { title?: string | null; slug?: string | null; content?: any; + title_info?: string | null; + title_image?: string | Files | null; shows?: (number | ItemsEventsEventShows)[] | null; logos?: (number | ItemsEventsFiles)[] | null; }