edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add reusable ImageFigure component

Browse Source
This commit is contained in:
Jonas Braathen
2024-07-07 17:43:19 +02:00
parent e03e2624db
commit ada7d25083
15 changed files with 70 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/app/aktuelt/[slug]/page.tsx
View File

@ -1,6 +1,6 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import Image from "@/components/general/Image";
import { ImageFigure } from "@/components/general/Image";
import { graphql } from "@/gql";
import { NewsFragment } from "@/gql/graphql";
import { formatDate, formatExtendedDateTime } from "@/lib/date";
@ -56,18 +56,14 @@ export default async function Page({ params }: { params: { slug: string } }) {
</p>
<h1 className="news-title">{news.title}</h1>
{featuredImage && (
<figure key={featuredImage.id}>
<Image
src={featuredImage.url}
alt={featuredImage.alt ?? ""}
width={featuredImage.width}
height={featuredImage.height}
sizes="100vw"
/>
{featuredImage.attribution && (
<figcaption>{featuredImage.attribution}</figcaption>
)}
</figure>
<ImageFigure
src={featuredImage.url}
alt={featuredImage.alt ?? ""}
width={featuredImage.width}
height={featuredImage.height}
attribution={featuredImage.attribution}
sizes="100vw"
/>
)}
</section>
<section className="pageContent">

2
web/src/app/foreninger/[slug]/page.tsx
View File

@ -1,7 +1,7 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import Icon from "@/components/general/Icon";
import Image from "@/components/general/Image";
import { Image } from "@/components/general/Image";
import { graphql } from "@/gql";
import { AssociationFragment } from "@/gql/graphql";
import Link from "next/link";

2
web/src/app/lokaler/[slug]/page.tsx
View File

@ -1,7 +1,7 @@
import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
import Image from "@/components/general/Image";
import { Image } from "@/components/general/Image";
import { NeufMap } from "@/components/venues/NeufMap";
import { VenueInfo } from "@/components/venues/VenueInfo";
import { graphql } from "@/gql";

2
web/src/components/associations/AssociationItem.tsx
View File

@ -1,7 +1,7 @@
import { AssociationFragment } from "@/gql/graphql";
import styles from "./associationItem.module.scss";
import Link from "next/link";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
export const AssociationItem = ({
association,

2
web/src/components/blocks/FeaturedBlock.tsx
View File

@ -1,6 +1,6 @@
import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
import Link from "next/link";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import styles from "./featuredBlock.module.scss";
// the 'text' field has been aliased to 'featuredBlockText' and i'm

2
web/src/components/blocks/HorizontalRuleBlock.tsx
View File

@ -1,5 +1,5 @@
import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import styles from "./horizontalRuleBlock.module.scss";
export const HorizontalRuleBlock = ({

24
web/src/components/blocks/ImageSliderBlock.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import { ImageFigure } from "@/components/general/Image";
import styles from "./imageSliderBlock.module.scss";
// import swiper modules & styles
@ -31,18 +31,16 @@ export const ImageSliderBlock = ({
{block.images &&
block.images.map((imageItem: any, index: number) => (
<SwiperSlide key={index}>
<figure key={imageItem.image.id}>
<Image
src={imageItem.image.url}
alt={imageItem.image.alt ?? ""}
width={imageItem.image.width}
height={imageItem.image.height}
// width={0}
// height={0}
// sizes="20vw"
/>
{imageItem.text && <figcaption>{imageItem.text}</figcaption>}
</figure>
<ImageFigure
key={imageItem.image.id}
src={imageItem.image.url}
alt={imageItem.image.alt ?? ""}
width={imageItem.image.width}
height={imageItem.image.height}
attribution={imageItem.image.attribution}
caption={imageItem.text}
sizes="100vw"
/>
</SwiperSlide>
))}
</Swiper>

32
web/src/components/blocks/ImageWithTextBlock.tsx
View File

@ -1,26 +1,20 @@
import { ImageWithTextBlock as ImageWithTextBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import styles from "./imageWithTextBlock.module.scss";
import { ImageFigure } from "@/components/general/Image";
export const ImageWithTextBlock = ({
export function ImageWithTextBlock({
block,
}: {
block: ImageWithTextBlockType;
}) => {
}) {
return (
<figure
className={`${styles.imageWithTextBlock} ${styles[block.imageFormat]}`}
>
<Image
src={block.image.url}
alt={block.image.alt ?? ""}
width={block.image.width}
height={block.image.height}
// width={0}
// height={0}
// sizes="20vw"
/>
{block.text && <figcaption>{block.text}</figcaption>}
</figure>
<ImageFigure
src={block.image.url}
alt={block.image.alt ?? ""}
width={block.image.width}
height={block.image.height}
attribution={block.image.attribution}
caption={block.text}
imageFormat={block.imageFormat}
/>
);
};
}

4
web/src/components/events/EventHeader.tsx
View File

@ -1,6 +1,6 @@
import { EventFragment } from "@/lib/event";
import styles from "./eventHeader.module.scss";
import Image from "@/components/general/Image";
import { Image } from "@/components/general/Image";
import Link from "next/link";
import { OrganizerList } from "./OrganizerList";
import Icon from "../general/Icon";
@ -17,6 +17,8 @@ function formatPrice(price: number): string {
}
export const EventHeader = ({ event }: { event: EventFragment }) => {
// TODO: where should we show image attribution for the featured image?
const featuredImage: any = event.featuredImage;
return (

2
web/src/components/events/EventItem.tsx
View File

@ -2,7 +2,7 @@
import styles from "./eventItem.module.scss";
import Link from "next/link";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import {
SingularEvent,
EventFragment,

22
web/src/components/general/Image.tsx
View File

@ -1,7 +1,25 @@
import NextImage, { ImageProps as NextImageProps } from "next/image";
import styles from "./image.module.scss";
type ImageProps = NextImageProps;
type ImageProps = NextImageProps & {
attribution?: string | null;
caption?: string | null;
imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
};
export default function Image(props: ImageProps) {
export function ImageFigure(props: ImageProps) {
const { attribution, caption, imageFormat, ...nextImageProps } = props;
return (
<figure
className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
>
<NextImage {...nextImageProps} />
{attribution && <div className={styles.attribution}>{attribution}</div>}
{caption && <figcaption>{caption}</figcaption>}
</figure>
);
}
export function Image(props: NextImageProps) {
return <NextImage {...props} />;
}

6
web/src/components/blocks/imageWithTextBlock.module.scss → web/src/components/general/image.module.scss
View File

@ -1,4 +1,4 @@
.imageWithTextBlock {
.image {
width: 100%;
margin: 0;
@ -52,4 +52,8 @@
text-align: left;
}
}
}
.attribution {
border: 1px dotted mediumpurple;
}

2
web/src/components/news/NewsItem.tsx
View File

@ -1,5 +1,5 @@
import styles from "./newsItem.module.scss";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import { NewsFragment } from "@/lib/news";
import { formatDate } from "@/lib/date";
import Link from "next/link";

2
web/src/components/venues/VenueInfo.tsx
View File

@ -1,7 +1,7 @@
import { VenueFragment } from "@/gql/graphql";
import styles from "./venueInfo.module.scss";
import Link from "next/link";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
import Icon from "../general/Icon";
export const VenueInfo = ({ venue }: { venue: VenueFragment }) => {

2
web/src/components/venues/VenueItem.tsx
View File

@ -1,7 +1,7 @@
import { VenueFragment } from "@/gql/graphql";
import styles from "./venueItem.module.scss";
import Link from "next/link";
import Image from "../general/Image";
import { Image } from "@/components/general/Image";
export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
const featuredImage: any = venue.featuredImage;