#Bit of typescript confusion :)

1 messages · Page 1 of 1 (latest)

north knoll
#

I'm just trying to refactor an element so it's more reuseable and just a bit confused by the types. Know I'm being a bit thick, but my brain is broken today 😄

LocationSlider used to create the html for each LocationCard, but because at larger than sm screensizes I want to remove the Slider and just display the LocationCards, so I separated LocationCard into its own component. But when using the component directly it complains about trying to spread the locationImage ({...locationImage1})

Any help would be amazing 🙂

const locationImage1 = await getImage({
  src: location1,
  format: "jpeg",
  widths:[400, 800, 1200, 1600],
  sizes:`(min-width: ${lg}) 50vw, 100vw`,
});

<div class="sm:hidden" >
  <LocationSlider 
    slides={[
      {id:1, title:'UK Locations', ...locationImage1, href:'/uk-locations', transition: 'uk-locations'}, 
      {id:2, title: 'US Locations', ...locationImage2, href:'/us-locations', transition: 'us-locations'}, 
      {id:3, title: 'EU Locations', ...locationImage3, href:'/eu-locations', transition: 'eu-locations'}
    ]} 
  client:visible />
</div>
<Locations className="hidden sm:flex">
  <LocationCard id={1}, title='UK Locations', {...locationImage1}, href='/uk-locations', transition='uk-locations'/>
  <LocationCard id={2}, title='UK Locations', {...locationImage1}, href='/uk-locations', transition='uk-locations'/>
  <LocationCard id={2}, title='UK Locations', {...locationImage1}, href='/uk-locations', transition='uk-locations'/>
</Locations>

Here's the LocationCard type:

export interface LocationCardType extends GetImageResult {
  id: number;
  title: string;
  href?: string;
  transition?: string;
  className?: string;
}

export const LocationCard = ({
  className,
  id,
  title,
  href,
  transition,
  src,
}: LocationCardType) => {}
north knoll
#

I'm using commas to separate parameters 😄

dusty gust
#

You're doing two different things: ...locationImage1 and {...locationImage1}

north knoll