feat: correctly size search result items
This commit is contained in:
@@ -47,6 +47,11 @@ const Image = (
|
|||||||
"/api/images",
|
"/api/images",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const hasDimensions = typeof props.width === "number" &&
|
||||||
|
typeof props.height === "number";
|
||||||
|
const sizes = hasDimensions ? "" : responsiveAttributes.sizes;
|
||||||
|
const srcset = hasDimensions ? "" : responsiveAttributes.srcset;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
@@ -62,8 +67,8 @@ const Image = (
|
|||||||
loading="lazy"
|
loading="lazy"
|
||||||
alt={props.alt}
|
alt={props.alt}
|
||||||
style={props.style}
|
style={props.style}
|
||||||
srcset={responsiveAttributes.srcset}
|
sizes={sizes}
|
||||||
sizes={responsiveAttributes.sizes}
|
srcset={srcset}
|
||||||
src={`/api/images?image=${asset(props.src)}${
|
src={`/api/images?image=${asset(props.src)}${
|
||||||
props.width ? `&width=${props.width}` : ""
|
props.width ? `&width=${props.width}` : ""
|
||||||
}${props.height ? `&height=${props.height}` : ""}`}
|
}${props.height ? `&height=${props.height}` : ""}`}
|
||||||
|
|||||||
@@ -26,7 +26,6 @@ export const SmallRating = (
|
|||||||
export const Rating = (
|
export const Rating = (
|
||||||
{ max, rating = useSignal(0) }: {
|
{ max, rating = useSignal(0) }: {
|
||||||
max?: number;
|
max?: number;
|
||||||
defaultRating: number;
|
|
||||||
rating: Signal<number | undefined>;
|
rating: Signal<number | undefined>;
|
||||||
},
|
},
|
||||||
) => {
|
) => {
|
||||||
|
|||||||
@@ -55,8 +55,8 @@ const SearchResultImage = ({ src }: { src: string }) => {
|
|||||||
return (
|
return (
|
||||||
<Image
|
<Image
|
||||||
class="object-cover w-12 h-12 rounded-full"
|
class="object-cover w-12 h-12 rounded-full"
|
||||||
width="50"
|
width={100}
|
||||||
height="50"
|
height={100}
|
||||||
src={src}
|
src={src}
|
||||||
alt="preview image"
|
alt="preview image"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user