kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 12:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: remove mirrored types of Picture and Image and use native types instead

Browse Source
This commit is contained in:
Stefan Imhoff
2023-05-18 14:31:50 +02:00
parent a43026a48a
commit 4ce5f077d3
2 changed files with 16 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Image.astro
View File

@@ -1,30 +1,22 @@
---
import cx from 'classnames';
import { Image } from '@astrojs/image/components';
import type { ImageComponentLocalImageProps } from '@astrojs/image/components';
interface Props {
aspectRatio?: number | `${number}:${number}`;
alt?: string;
interface Props extends ImageComponentLocalImageProps {
class?: string;
height?: number;
noMargin?: boolean;
src: string;
width: number;
slot?: string;
}
const { aspectRatio, alt, class: className, height, noMargin, src, width, ...props } = Astro.props;
const { class: className, noMargin, ...props } = Astro.props;
const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
---
<div class={classes}>
<Image
aspectRatio={aspectRatio || '1:1'}
alt={alt || ''}
class="block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10"
height={height || 0}
src={src}
width={width}
{...props}
/>
</div>

31
src/components/Picture.astro
View File

@@ -1,31 +1,24 @@
---
import cx from 'classnames';
import { Picture } from '@astrojs/image/components';
interface Props {
alt?: string;
aspectRatio?: number | `${number}:${number}`;
import { Picture } from '@astrojs/image/components';
import type { PictureComponentLocalImageProps } from '@astrojs/image/components';
interface Props extends PictureComponentLocalImageProps {
class?: string;
formats?: string[];
noMargin?: boolean;
sizes?: string;
src: string;
widths: number[];
slot?: string;
}
const { alt, aspectRatio, class: className, noMargin, sizes, src, widths, ...props } = Astro.props;
const { class: className, noMargin, ...props } = Astro.props;
const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
const classes = cx(
'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
{ 'mbe-0': noMargin },
className
);
---
<div class={classes}>
<Picture
alt={alt || ''}
aspectRatio={aspectRatio}
class="block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10"
sizes={sizes}
src={src}
widths={widths}
{...props}
/>
<Picture {...props} />
</div>