feat: ✨ implement simple landing page with image, tagline, short about text and image gallery
- Add ParkUI - Add lucide-react - Add RichText renderer - Add Moderustic fontmain
parent
c3dd300769
commit
34be1c9ad7
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"typescript.preferences.importModuleSpecifier": "non-relative",
|
||||||
|
"javascript.preferences.importModuleSpecifier": "non-relative"
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://park-ui.com/registry/latest/schema.json",
|
||||||
|
"jsFramework": "react",
|
||||||
|
"outputPath": "./src/components/ui"
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,10 @@
|
|||||||
|
import Carousel from "@/components/ui/carousel";
|
||||||
|
import { Media } from "@/payload-types";
|
||||||
|
import { getPayload } from "@/utils/payload";
|
||||||
|
|
||||||
|
export default async function Gallery() {
|
||||||
|
const payload = await getPayload();
|
||||||
|
const { images } = await payload.findGlobal({ slug: "gallery" });
|
||||||
|
|
||||||
|
return <Carousel images={images.map(({ image }) => image as Media)} w="100%" />;
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
import { Box, Container, Stack } from "@styled-system/jsx";
|
||||||
|
|
||||||
|
import Gallery from "./gallery";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Media } from "@/payload-types";
|
||||||
|
import { Metadata } from "next";
|
||||||
|
import RichText from "@/components/rich-text";
|
||||||
|
import { css } from "@styled-system/css";
|
||||||
|
import { getPayload } from "@/utils/payload";
|
||||||
|
import { styled } from "@styled-system/jsx";
|
||||||
|
|
||||||
|
export default async function Home() {
|
||||||
|
const payload = await getPayload();
|
||||||
|
const home = await payload.findGlobal({ slug: "home" });
|
||||||
|
const about = await payload.findGlobal({ slug: "about" });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack gap={10} align="center">
|
||||||
|
<Box w="100%" h="80vh" position="relative">
|
||||||
|
<Image
|
||||||
|
src={(home.splashImage as Media)!.url!}
|
||||||
|
alt={about.name}
|
||||||
|
className={css({ objectFit: "cover" })}
|
||||||
|
fill
|
||||||
|
/>
|
||||||
|
<styled.div
|
||||||
|
position="absolute"
|
||||||
|
color="white"
|
||||||
|
top="70%"
|
||||||
|
width="100%"
|
||||||
|
textAlign="center"
|
||||||
|
fontSize={24}
|
||||||
|
>
|
||||||
|
{home.tagline}
|
||||||
|
</styled.div>
|
||||||
|
</Box>
|
||||||
|
<Container>
|
||||||
|
<RichText content={home.aboutText} />
|
||||||
|
</Container>
|
||||||
|
<Box maxW={600} w="100%" h="60vh">
|
||||||
|
<Gallery />
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function generateMetadata(): Promise<Metadata> {
|
||||||
|
const payload = await getPayload();
|
||||||
|
const about = await payload.findGlobal({ slug: "about" });
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: about.name,
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import type { CollectionConfig } from "payload";
|
||||||
|
|
||||||
|
export const Holiday: CollectionConfig = {
|
||||||
|
slug: "holiday",
|
||||||
|
access: {
|
||||||
|
read: () => true,
|
||||||
|
},
|
||||||
|
admin: {
|
||||||
|
useAsTitle: "title",
|
||||||
|
},
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
name: "title",
|
||||||
|
type: "text",
|
||||||
|
localized: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "from",
|
||||||
|
type: "date",
|
||||||
|
admin: {
|
||||||
|
date: {
|
||||||
|
pickerAppearance: "dayOnly",
|
||||||
|
displayFormat: "d MMM yyy",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "to",
|
||||||
|
type: "date",
|
||||||
|
admin: {
|
||||||
|
date: {
|
||||||
|
pickerAppearance: "dayOnly",
|
||||||
|
displayFormat: "d MMM yyy",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import type { CollectionConfig } from "payload";
|
||||||
|
|
||||||
|
export const Vacation: CollectionConfig = {
|
||||||
|
slug: "vacation",
|
||||||
|
access: {
|
||||||
|
read: () => true,
|
||||||
|
},
|
||||||
|
admin: {
|
||||||
|
useAsTitle: "title",
|
||||||
|
},
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
name: "title",
|
||||||
|
type: "text",
|
||||||
|
localized: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "from",
|
||||||
|
type: "date",
|
||||||
|
admin: {
|
||||||
|
date: {
|
||||||
|
pickerAppearance: "dayOnly",
|
||||||
|
displayFormat: "d MMM yyy",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "to",
|
||||||
|
type: "date",
|
||||||
|
admin: {
|
||||||
|
date: {
|
||||||
|
pickerAppearance: "dayOnly",
|
||||||
|
displayFormat: "d MMM yyy",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Media } from "@/payload-types";
|
||||||
|
import { css } from "@styled-system/css";
|
||||||
|
import { flex } from "@styled-system/patterns";
|
||||||
|
import { getPayload } from "@/utils/payload";
|
||||||
|
import { styled } from "@styled-system/jsx";
|
||||||
|
|
||||||
|
export default async function Navbar() {
|
||||||
|
const payload = await getPayload();
|
||||||
|
const about = await payload.findGlobal({ slug: "about" });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<styled.nav
|
||||||
|
className={flex({ gap: 4 })}
|
||||||
|
bg="white"
|
||||||
|
h={20}
|
||||||
|
px={4}
|
||||||
|
boxShadow="lg"
|
||||||
|
alignItems="center"
|
||||||
|
position="fixed"
|
||||||
|
zIndex={500}
|
||||||
|
top={0}
|
||||||
|
left={0}
|
||||||
|
right={0}
|
||||||
|
width="100%"
|
||||||
|
>
|
||||||
|
{about.logo ? (
|
||||||
|
<Link href="/" className={css({ h: 16, w: 200, position: "relative" })}>
|
||||||
|
<Image
|
||||||
|
src={(about.logo as Media).url!}
|
||||||
|
alt={(about.logo as Media).alt ?? about.name}
|
||||||
|
className={css({ objectFit: "contain", objectPosition: "left" })}
|
||||||
|
fill
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<Link href="/" className={css({ fontSize: 24 })}>
|
||||||
|
{about.name}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<styled.div flexGrow={1} />
|
||||||
|
|
||||||
|
<Link href="/about" className={css({ _hover: { color: "gray.800" } })}>
|
||||||
|
Über uns
|
||||||
|
</Link>
|
||||||
|
<Link href="/menu" className={css({ _hover: { color: "gray.800" } })}>
|
||||||
|
Menü
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className={css({
|
||||||
|
background: "accent.9",
|
||||||
|
color: "white",
|
||||||
|
p: 2,
|
||||||
|
borderRadius: "md",
|
||||||
|
_hover: {
|
||||||
|
background: "accent.11",
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
Kontakt
|
||||||
|
</Link>
|
||||||
|
</styled.nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { css, cx } from "@styled-system/css";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { container } from "@styled-system/patterns";
|
||||||
|
import { serializeLexical } from "./serialize";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
className?: string;
|
||||||
|
content: Record<string, any>;
|
||||||
|
enableGutter?: boolean;
|
||||||
|
enableProse?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const RichText: React.FC<Props> = ({ className, content, enableGutter = true }) => {
|
||||||
|
if (!content) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cx(enableGutter ? container() : css({ maxW: "none" }), className)}>
|
||||||
|
{content &&
|
||||||
|
!Array.isArray(content) &&
|
||||||
|
typeof content === "object" &&
|
||||||
|
"root" in content &&
|
||||||
|
serializeLexical({ nodes: content?.root?.children })}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RichText;
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
// @ts-nocheck
|
||||||
|
//This copy-and-pasted from lexical here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
|
||||||
|
|
||||||
|
import type { ElementFormatType, TextFormatType } from "lexical";
|
||||||
|
import type { TextDetailType, TextModeType } from "lexical/nodes/LexicalTextNode";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// DOM
|
||||||
|
export const DOM_ELEMENT_TYPE = 1;
|
||||||
|
export const DOM_TEXT_TYPE = 3;
|
||||||
|
|
||||||
|
// Reconciling
|
||||||
|
export const NO_DIRTY_NODES = 0;
|
||||||
|
export const HAS_DIRTY_NODES = 1;
|
||||||
|
export const FULL_RECONCILE = 2;
|
||||||
|
|
||||||
|
// Text node modes
|
||||||
|
export const IS_NORMAL = 0;
|
||||||
|
export const IS_TOKEN = 1;
|
||||||
|
export const IS_SEGMENTED = 2;
|
||||||
|
// IS_INERT = 3
|
||||||
|
|
||||||
|
// Text node formatting
|
||||||
|
export const IS_BOLD = 1;
|
||||||
|
export const IS_ITALIC = 1 << 1;
|
||||||
|
export const IS_STRIKETHROUGH = 1 << 2;
|
||||||
|
export const IS_UNDERLINE = 1 << 3;
|
||||||
|
export const IS_CODE = 1 << 4;
|
||||||
|
export const IS_SUBSCRIPT = 1 << 5;
|
||||||
|
export const IS_SUPERSCRIPT = 1 << 6;
|
||||||
|
export const IS_HIGHLIGHT = 1 << 7;
|
||||||
|
|
||||||
|
export const IS_ALL_FORMATTING =
|
||||||
|
IS_BOLD |
|
||||||
|
IS_ITALIC |
|
||||||
|
IS_STRIKETHROUGH |
|
||||||
|
IS_UNDERLINE |
|
||||||
|
IS_CODE |
|
||||||
|
IS_SUBSCRIPT |
|
||||||
|
IS_SUPERSCRIPT |
|
||||||
|
IS_HIGHLIGHT;
|
||||||
|
|
||||||
|
// Text node details
|
||||||
|
export const IS_DIRECTIONLESS = 1;
|
||||||
|
export const IS_UNMERGEABLE = 1 << 1;
|
||||||
|
|
||||||
|
// Element node formatting
|
||||||
|
export const IS_ALIGN_LEFT = 1;
|
||||||
|
export const IS_ALIGN_CENTER = 2;
|
||||||
|
export const IS_ALIGN_RIGHT = 3;
|
||||||
|
export const IS_ALIGN_JUSTIFY = 4;
|
||||||
|
export const IS_ALIGN_START = 5;
|
||||||
|
export const IS_ALIGN_END = 6;
|
||||||
|
|
||||||
|
// Reconciliation
|
||||||
|
export const NON_BREAKING_SPACE = "\u00A0";
|
||||||
|
const ZERO_WIDTH_SPACE = "\u200b";
|
||||||
|
|
||||||
|
export const DOUBLE_LINE_BREAK = "\n\n";
|
||||||
|
|
||||||
|
// For FF, we need to use a non-breaking space, or it gets composition
|
||||||
|
// in a stuck state.
|
||||||
|
|
||||||
|
const RTL = "\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC";
|
||||||
|
const LTR =
|
||||||
|
"A-Za-z\u00C0-\u00D6\u00D8-\u00F6" +
|
||||||
|
"\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C" +
|
||||||
|
"\uFE00-\uFE6F\uFEFD-\uFFFF";
|
||||||
|
|
||||||
|
export const RTL_REGEX = new RegExp("^[^" + LTR + "]*[" + RTL + "]");
|
||||||
|
|
||||||
|
export const LTR_REGEX = new RegExp("^[^" + RTL + "]*[" + LTR + "]");
|
||||||
|
|
||||||
|
export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
|
||||||
|
bold: IS_BOLD,
|
||||||
|
code: IS_CODE,
|
||||||
|
highlight: IS_HIGHLIGHT,
|
||||||
|
italic: IS_ITALIC,
|
||||||
|
strikethrough: IS_STRIKETHROUGH,
|
||||||
|
subscript: IS_SUBSCRIPT,
|
||||||
|
superscript: IS_SUPERSCRIPT,
|
||||||
|
underline: IS_UNDERLINE,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DETAIL_TYPE_TO_DETAIL: Record<TextDetailType | string, number> = {
|
||||||
|
directionless: IS_DIRECTIONLESS,
|
||||||
|
unmergeable: IS_UNMERGEABLE,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ELEMENT_TYPE_TO_FORMAT: Record<Exclude<ElementFormatType, "">, number> = {
|
||||||
|
center: IS_ALIGN_CENTER,
|
||||||
|
end: IS_ALIGN_END,
|
||||||
|
justify: IS_ALIGN_JUSTIFY,
|
||||||
|
left: IS_ALIGN_LEFT,
|
||||||
|
right: IS_ALIGN_RIGHT,
|
||||||
|
start: IS_ALIGN_START,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ELEMENT_FORMAT_TO_TYPE: Record<number, ElementFormatType> = {
|
||||||
|
[IS_ALIGN_CENTER]: "center",
|
||||||
|
[IS_ALIGN_END]: "end",
|
||||||
|
[IS_ALIGN_JUSTIFY]: "justify",
|
||||||
|
[IS_ALIGN_LEFT]: "left",
|
||||||
|
[IS_ALIGN_RIGHT]: "right",
|
||||||
|
[IS_ALIGN_START]: "start",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TEXT_MODE_TO_TYPE: Record<TextModeType, 0 | 1 | 2> = {
|
||||||
|
normal: IS_NORMAL,
|
||||||
|
segmented: IS_SEGMENTED,
|
||||||
|
token: IS_TOKEN,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TEXT_TYPE_TO_MODE: Record<number, TextModeType> = {
|
||||||
|
[IS_NORMAL]: "normal",
|
||||||
|
[IS_SEGMENTED]: "segmented",
|
||||||
|
[IS_TOKEN]: "token",
|
||||||
|
};
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
import { DefaultNodeTypes, SerializedBlockNode } from "@payloadcms/richtext-lexical";
|
||||||
|
import {
|
||||||
|
IS_BOLD,
|
||||||
|
IS_CODE,
|
||||||
|
IS_ITALIC,
|
||||||
|
IS_STRIKETHROUGH,
|
||||||
|
IS_SUBSCRIPT,
|
||||||
|
IS_SUPERSCRIPT,
|
||||||
|
IS_UNDERLINE,
|
||||||
|
} from "./node-format";
|
||||||
|
import React, { Fragment, JSX } from "react";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export type NodeTypes = DefaultNodeTypes;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
nodes: NodeTypes[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export function serializeLexical({ nodes }: Props): JSX.Element {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
{nodes?.map((node, index): JSX.Element | null => {
|
||||||
|
if (node == null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (node.type === "text") {
|
||||||
|
let text = <React.Fragment key={index}>{node.text}</React.Fragment>;
|
||||||
|
if (node.format & IS_BOLD) {
|
||||||
|
text = <strong key={index}>{text}</strong>;
|
||||||
|
}
|
||||||
|
if (node.format & IS_ITALIC) {
|
||||||
|
text = <em key={index}>{text}</em>;
|
||||||
|
}
|
||||||
|
if (node.format & IS_STRIKETHROUGH) {
|
||||||
|
text = (
|
||||||
|
<span key={index} style={{ textDecoration: "line-through" }}>
|
||||||
|
{text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (node.format & IS_UNDERLINE) {
|
||||||
|
text = (
|
||||||
|
<span key={index} style={{ textDecoration: "underline" }}>
|
||||||
|
{text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (node.format & IS_CODE) {
|
||||||
|
text = <code key={index}>{node.text}</code>;
|
||||||
|
}
|
||||||
|
if (node.format & IS_SUBSCRIPT) {
|
||||||
|
text = <sub key={index}>{text}</sub>;
|
||||||
|
}
|
||||||
|
if (node.format & IS_SUPERSCRIPT) {
|
||||||
|
text = <sup key={index}>{text}</sup>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// NOTE: Hacky fix for
|
||||||
|
// https://github.com/facebook/lexical/blob/d10c4e6e55261b2fdd7d1845aed46151d0f06a8c/packages/lexical-list/src/LexicalListItemNode.ts#L133
|
||||||
|
// which does not return checked: false (only true - i.e. there is no prop for false)
|
||||||
|
const serializedChildrenFn = (node: NodeTypes): JSX.Element | null => {
|
||||||
|
if (node.children == null) {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
if (node?.type === "list" && node?.listType === "check") {
|
||||||
|
for (const item of node.children) {
|
||||||
|
if ("checked" in item) {
|
||||||
|
if (!item?.checked) {
|
||||||
|
item.checked = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return serializeLexical({ nodes: node.children as NodeTypes[] });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const serializedChildren = "children" in node ? serializedChildrenFn(node) : "";
|
||||||
|
|
||||||
|
switch (node.type) {
|
||||||
|
case "linebreak": {
|
||||||
|
return <br key={index} />;
|
||||||
|
}
|
||||||
|
case "paragraph": {
|
||||||
|
return (
|
||||||
|
<p key={index}>
|
||||||
|
{serializedChildren}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
case "heading": {
|
||||||
|
const Tag = node?.tag;
|
||||||
|
return (
|
||||||
|
<Tag key={index}>
|
||||||
|
{serializedChildren}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
case "list": {
|
||||||
|
const Tag = node?.tag;
|
||||||
|
return (
|
||||||
|
<Tag className="list col-start-2" key={index}>
|
||||||
|
{serializedChildren}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
case "listitem": {
|
||||||
|
if (node?.checked != null) {
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
aria-checked={node.checked ? "true" : "false"}
|
||||||
|
className={` ${node.checked ? "" : ""}`}
|
||||||
|
key={index}
|
||||||
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
|
||||||
|
role="checkbox"
|
||||||
|
tabIndex={-1}
|
||||||
|
value={node?.value}
|
||||||
|
>
|
||||||
|
{serializedChildren}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<li key={index} value={node?.value}>
|
||||||
|
{serializedChildren}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
case "quote": {
|
||||||
|
return (
|
||||||
|
<blockquote className="col-start-2" key={index}>
|
||||||
|
{serializedChildren}
|
||||||
|
</blockquote>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
case "link": {
|
||||||
|
const fields = node.fields;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a key={index} href={fields.url} target={Boolean(fields?.newTab) ? "_blank" : ""}>
|
||||||
|
{serializedChildren}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import { forwardRef } from 'react'
|
||||||
|
import { Center, styled } from 'styled-system/jsx'
|
||||||
|
import { Spinner } from './spinner'
|
||||||
|
import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'
|
||||||
|
|
||||||
|
interface ButtonLoadingProps {
|
||||||
|
loading?: boolean
|
||||||
|
loadingText?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}
|
||||||
|
|
||||||
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
|
||||||
|
const { loading, disabled, loadingText, children, ...rest } = props
|
||||||
|
|
||||||
|
const trulyDisabled = loading || disabled
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledButton disabled={trulyDisabled} ref={ref} {...rest}>
|
||||||
|
{loading && !loadingText ? (
|
||||||
|
<>
|
||||||
|
<ButtonSpinner />
|
||||||
|
<styled.span opacity={0}>{children}</styled.span>
|
||||||
|
</>
|
||||||
|
) : loadingText ? (
|
||||||
|
loadingText
|
||||||
|
) : (
|
||||||
|
children
|
||||||
|
)}
|
||||||
|
</StyledButton>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
Button.displayName = 'Button'
|
||||||
|
|
||||||
|
const ButtonSpinner = () => (
|
||||||
|
<Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
|
||||||
|
<Spinner colorPalette="gray" />
|
||||||
|
</Center>
|
||||||
|
)
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
||||||
|
import {
|
||||||
|
Control,
|
||||||
|
Indicator,
|
||||||
|
IndicatorGroup,
|
||||||
|
Item,
|
||||||
|
ItemGroup,
|
||||||
|
NextTrigger,
|
||||||
|
PrevTrigger,
|
||||||
|
Root,
|
||||||
|
RootProps,
|
||||||
|
Viewport,
|
||||||
|
} from "./styled/carousel";
|
||||||
|
|
||||||
|
import { IconButton } from "@/components/ui/icon-button";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Media } from "@/payload-types";
|
||||||
|
import { css } from "@styled-system/css";
|
||||||
|
import { styled } from "@styled-system/jsx";
|
||||||
|
|
||||||
|
export type CarouselProps = RootProps & {
|
||||||
|
images: Media[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Carousel({ images, ...props }: CarouselProps) {
|
||||||
|
return (
|
||||||
|
<Root h="100%" {...props}>
|
||||||
|
<Viewport h="100%">
|
||||||
|
<ItemGroup style={{ height: "100%" }}>
|
||||||
|
{images.map((image, index) => (
|
||||||
|
<Item key={index} index={index}>
|
||||||
|
<styled.div h="100%" width="100%" position="relative">
|
||||||
|
<Image
|
||||||
|
src={image.url!}
|
||||||
|
alt={image.alt ?? ""}
|
||||||
|
className={css({ objectFit: "contain" })}
|
||||||
|
fill
|
||||||
|
/>
|
||||||
|
</styled.div>
|
||||||
|
</Item>
|
||||||
|
))}
|
||||||
|
</ItemGroup>
|
||||||
|
<Control>
|
||||||
|
<PrevTrigger asChild>
|
||||||
|
<IconButton size="sm" variant="link" aria-label="Previous Slide">
|
||||||
|
<ChevronLeftIcon />
|
||||||
|
</IconButton>
|
||||||
|
</PrevTrigger>
|
||||||
|
<IndicatorGroup>
|
||||||
|
{images.map((_, index) => (
|
||||||
|
<Indicator key={index} index={index} aria-label={`Goto slide ${index + 1}`} />
|
||||||
|
))}
|
||||||
|
</IndicatorGroup>
|
||||||
|
<NextTrigger asChild>
|
||||||
|
<IconButton size="sm" variant="link" aria-label="Next Slide">
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</IconButton>
|
||||||
|
</NextTrigger>
|
||||||
|
</Control>
|
||||||
|
</Viewport>
|
||||||
|
</Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export { IconButton, type IconButtonProps } from './styled/icon-button'
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { forwardRef } from 'react'
|
||||||
|
import { styled } from 'styled-system/jsx'
|
||||||
|
import { Spinner as StyledSpinner, type SpinnerProps as StyledSpinnerProps } from './styled/spinner'
|
||||||
|
|
||||||
|
export interface SpinnerProps extends StyledSpinnerProps {
|
||||||
|
/**
|
||||||
|
* For accessibility, it is important to add a fallback loading text.
|
||||||
|
* This text will be visible to screen readers.
|
||||||
|
* @default "Loading..."
|
||||||
|
*/
|
||||||
|
label?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>((props, ref) => {
|
||||||
|
const { label = 'Loading...', ...rest } = props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledSpinner
|
||||||
|
ref={ref}
|
||||||
|
borderBottomColor="transparent"
|
||||||
|
borderLeftColor="transparent"
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{label && <styled.span srOnly>{label}</styled.span>}
|
||||||
|
</StyledSpinner>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
Spinner.displayName = 'Spinner'
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { ark } from '@ark-ui/react/factory'
|
||||||
|
import { styled } from 'styled-system/jsx'
|
||||||
|
import { button } from 'styled-system/recipes'
|
||||||
|
import type { ComponentProps } from 'styled-system/types'
|
||||||
|
|
||||||
|
export type ButtonProps = ComponentProps<typeof Button>
|
||||||
|
export const Button = styled(ark.button, button)
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
'use client'
|
||||||
|
import type { Assign } from '@ark-ui/react'
|
||||||
|
import { Carousel } from '@ark-ui/react/carousel'
|
||||||
|
import { type CarouselVariantProps, carousel } from 'styled-system/recipes'
|
||||||
|
import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
|
||||||
|
import { createStyleContext } from './utils/create-style-context'
|
||||||
|
|
||||||
|
const { withProvider, withContext } = createStyleContext(carousel)
|
||||||
|
|
||||||
|
export type RootProviderProps = ComponentProps<typeof RootProvider>
|
||||||
|
export const RootProvider = withProvider<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<Assign<HTMLStyledProps<'div'>, Carousel.RootProviderBaseProps>, CarouselVariantProps>
|
||||||
|
>(Carousel.RootProvider, 'root')
|
||||||
|
|
||||||
|
export type RootProps = ComponentProps<typeof Root>
|
||||||
|
export const Root = withProvider<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<Assign<HTMLStyledProps<'div'>, Carousel.RootBaseProps>, CarouselVariantProps>
|
||||||
|
>(Carousel.Root, 'root')
|
||||||
|
|
||||||
|
export const Control = withContext<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<HTMLStyledProps<'div'>, Carousel.ControlBaseProps>
|
||||||
|
>(Carousel.Control, 'control')
|
||||||
|
|
||||||
|
export const IndicatorGroup = withContext<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<HTMLStyledProps<'div'>, Carousel.IndicatorGroupBaseProps>
|
||||||
|
>(Carousel.IndicatorGroup, 'indicatorGroup')
|
||||||
|
|
||||||
|
export const Indicator = withContext<
|
||||||
|
HTMLButtonElement,
|
||||||
|
Assign<HTMLStyledProps<'button'>, Carousel.IndicatorBaseProps>
|
||||||
|
>(Carousel.Indicator, 'indicator')
|
||||||
|
|
||||||
|
export const ItemGroup = withContext<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<HTMLStyledProps<'div'>, Carousel.ItemGroupBaseProps>
|
||||||
|
>(Carousel.ItemGroup, 'itemGroup')
|
||||||
|
|
||||||
|
export const Item = withContext<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<HTMLStyledProps<'div'>, Carousel.ItemBaseProps>
|
||||||
|
>(Carousel.Item, 'item')
|
||||||
|
|
||||||
|
export const NextTrigger = withContext<
|
||||||
|
HTMLButtonElement,
|
||||||
|
Assign<HTMLStyledProps<'button'>, Carousel.NextTriggerBaseProps>
|
||||||
|
>(Carousel.NextTrigger, 'nextTrigger')
|
||||||
|
|
||||||
|
export const PrevTrigger = withContext<
|
||||||
|
HTMLButtonElement,
|
||||||
|
Assign<HTMLStyledProps<'button'>, Carousel.PrevTriggerBaseProps>
|
||||||
|
>(Carousel.PrevTrigger, 'prevTrigger')
|
||||||
|
|
||||||
|
export const Viewport = withContext<
|
||||||
|
HTMLDivElement,
|
||||||
|
Assign<HTMLStyledProps<'div'>, Carousel.ViewportBaseProps>
|
||||||
|
>(Carousel.Viewport, 'viewport')
|
||||||
|
|
||||||
|
export { CarouselContext as Context } from '@ark-ui/react/carousel'
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import { ark } from '@ark-ui/react/factory'
|
||||||
|
import { styled } from 'styled-system/jsx'
|
||||||
|
import { type ButtonVariantProps, button } from 'styled-system/recipes'
|
||||||
|
import type { ComponentProps } from 'styled-system/types'
|
||||||
|
|
||||||
|
export type IconButtonProps = ComponentProps<typeof IconButton>
|
||||||
|
export const IconButton = styled(ark.button, button, {
|
||||||
|
defaultProps: { px: '0' } as ButtonVariantProps,
|
||||||
|
})
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { ark } from '@ark-ui/react/factory'
|
||||||
|
import { styled } from 'styled-system/jsx'
|
||||||
|
import { spinner } from 'styled-system/recipes'
|
||||||
|
import type { ComponentProps } from 'styled-system/types'
|
||||||
|
|
||||||
|
export type SpinnerProps = ComponentProps<typeof Spinner>
|
||||||
|
export const Spinner = styled(ark.div, spinner)
|
||||||
@ -0,0 +1,95 @@
|
|||||||
|
import {
|
||||||
|
type ElementType,
|
||||||
|
type ForwardRefExoticComponent,
|
||||||
|
type PropsWithoutRef,
|
||||||
|
type RefAttributes,
|
||||||
|
createContext,
|
||||||
|
forwardRef,
|
||||||
|
useContext,
|
||||||
|
} from 'react'
|
||||||
|
import { cx } from 'styled-system/css'
|
||||||
|
import { type StyledComponent, isCssProperty, styled } from 'styled-system/jsx'
|
||||||
|
|
||||||
|
type Props = Record<string, unknown>
|
||||||
|
type Recipe = {
|
||||||
|
(props?: Props): Props
|
||||||
|
splitVariantProps: (props: Props) => [Props, Props]
|
||||||
|
}
|
||||||
|
type Slot<R extends Recipe> = keyof ReturnType<R>
|
||||||
|
type Options = { forwardProps?: string[] }
|
||||||
|
|
||||||
|
const shouldForwardProp = (prop: string, variantKeys: string[], options: Options = {}) =>
|
||||||
|
options.forwardProps?.includes(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop))
|
||||||
|
|
||||||
|
export const createStyleContext = <R extends Recipe>(recipe: R) => {
|
||||||
|
const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
|
||||||
|
|
||||||
|
const withRootProvider = <P extends {}>(Component: ElementType) => {
|
||||||
|
const StyledComponent = (props: P) => {
|
||||||
|
const [variantProps, otherProps] = recipe.splitVariantProps(props)
|
||||||
|
const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyleContext.Provider value={slotStyles}>
|
||||||
|
<Component {...otherProps} />
|
||||||
|
</StyleContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return StyledComponent
|
||||||
|
}
|
||||||
|
|
||||||
|
const withProvider = <T, P extends { className?: string | undefined }>(
|
||||||
|
Component: ElementType,
|
||||||
|
slot: Slot<R>,
|
||||||
|
options?: Options,
|
||||||
|
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
|
||||||
|
const StyledComponent = styled(
|
||||||
|
Component,
|
||||||
|
{},
|
||||||
|
{
|
||||||
|
shouldForwardProp: (prop, variantKeys) => shouldForwardProp(prop, variantKeys, options),
|
||||||
|
},
|
||||||
|
) as StyledComponent<ElementType>
|
||||||
|
const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
|
||||||
|
const [variantProps, otherProps] = recipe.splitVariantProps(props)
|
||||||
|
const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyleContext.Provider value={slotStyles}>
|
||||||
|
<StyledComponent
|
||||||
|
{...otherProps}
|
||||||
|
ref={ref}
|
||||||
|
className={cx(slotStyles?.[slot], props.className)}
|
||||||
|
/>
|
||||||
|
</StyleContext.Provider>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
// @ts-expect-error
|
||||||
|
StyledSlotProvider.displayName = Component.displayName || Component.name
|
||||||
|
|
||||||
|
return StyledSlotProvider
|
||||||
|
}
|
||||||
|
|
||||||
|
const withContext = <T, P extends { className?: string | undefined }>(
|
||||||
|
Component: ElementType,
|
||||||
|
slot: Slot<R>,
|
||||||
|
): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
|
||||||
|
const StyledComponent = styled(Component)
|
||||||
|
const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
|
||||||
|
const slotStyles = useContext(StyleContext)
|
||||||
|
return (
|
||||||
|
<StyledComponent {...props} ref={ref} className={cx(slotStyles?.[slot], props.className)} />
|
||||||
|
)
|
||||||
|
})
|
||||||
|
// @ts-expect-error
|
||||||
|
StyledSlotComponent.displayName = Component.displayName || Component.name
|
||||||
|
|
||||||
|
return StyledSlotComponent
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
withRootProvider,
|
||||||
|
withProvider,
|
||||||
|
withContext,
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import type { GlobalConfig } from "payload";
|
||||||
|
|
||||||
|
export const Gallery: GlobalConfig = {
|
||||||
|
slug: "gallery",
|
||||||
|
access: {
|
||||||
|
read: () => true,
|
||||||
|
},
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
name: "images",
|
||||||
|
type: "array",
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
name: "image",
|
||||||
|
type: "relationship",
|
||||||
|
relationTo: "media",
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import type { GlobalConfig } from "payload";
|
||||||
|
|
||||||
|
export const Home: GlobalConfig = {
|
||||||
|
slug: "home",
|
||||||
|
access: {
|
||||||
|
read: () => true,
|
||||||
|
},
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
name: "splashImage",
|
||||||
|
type: "relationship",
|
||||||
|
relationTo: "media",
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "tagline",
|
||||||
|
type: "text",
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "aboutText",
|
||||||
|
type: "richText",
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
import config from "@payload-config";
|
||||||
|
import { getPayloadHMR } from "@payloadcms/next/utilities";
|
||||||
|
|
||||||
|
export const getPayload = async () => await getPayloadHMR({ config });
|
||||||
Loading…
Reference in New Issue