fix: Minor fixes

* Fixes `initialData` on carouselImages query
* Improves check for theme on `localStorage`
* Improves CSS logic for the `Tile` component

src/components/Carousel.tsx

@@ -6,10 +6,9 @@ export default function Carousel() {
  const {data: carouselImages} = useQuery({
  queryKey: ['carouselImages'],
  queryFn: getAllCarouselImages,
- initialData: [],
  });
 
- const images = carouselImages.map(img => (
+ const images = carouselImages?.map(img => (
  <div
  key={img._key}
  className="w-80 md:w-98 h-80 md:h-98 bg-gray-400 rounded shrink-0 snap-center relative"
@@ -27,7 +26,7 @@ export default function Carousel() {
  </div>
  ));
 
- if (!images.length) return null;
+ if (!images || !images.length) return null;
 
  return (
  <div className="mt-40">

src/components/ImageBlock.tsx

@@ -28,6 +28,7 @@ export default function ImageBlock({type, images}: Props) {
  <div key={img._key} className="col-span-1">
  <NextImage
  {...img}
+ loading="lazy"
  placeholder="blur"
  className={`rounded ${imageClass}`}
  />

src/components/Tile.tsx

@@ -9,45 +9,28 @@ interface Props {
 
 export default function Tile({title, link, size, icon}: Props) {
  const sizeClasses = {
- small: {
- content: 'text-base',
- tile: 'h-10 gap-4',
- },
- medium: {
- content: 'text-3-1/2xl',
- tile: 'py-5 gap-6',
- },
- large: {
- content: 'text-3-1/2xl',
- tile: 'py-9 gap-8',
- },
+ small: 'text-base h-10 gap-4',
+ medium: 'text-3-1/2xl py-5 gap-6',
+ large: 'text-3-1/2xl py-9 gap-8',
  };
 
  return link ? (
  <Link
  href={link}
- className={`${sizeClasses[size].tile} flex items-center justify-between border-b-1 border-black dark:border-white group`}
+ className={`${sizeClasses[size]} flex items-center justify-between border-b-1 border-black dark:border-white text-black dark:text-white group`}
  aria-label={title}
  >
- <p className={`${sizeClasses[size].content} text-black dark:text-white`}>
- {title}
- </p>
- <p
- className={`${sizeClasses[size].content} text-black dark:text-white group-hover:-rotate-45 duration-200 transition-transform ease-linear`}
- >
+ <p>{title}</p>
+ <p className="group-hover:-rotate-45 duration-200 transition-transform ease-linear">
  {icon ?? '→'}
  </p>
  </Link>
  ) : (
  <div
- className={`${sizeClasses[size].tile} flex items-center justify-between border-b-1 border-black dark:border-white`}
+ className={`${sizeClasses[size]} flex items-center justify-between border-b-1 border-black dark:border-white text-black dark:text-white`}
  >
- <p className={`${sizeClasses[size].content} text-black dark:text-white`}>
- {title}
- </p>
- <p className={`${sizeClasses[size].content} text-black dark:text-white`}>
- {icon ?? 'wip'}
- </p>
+ <p>{title}</p>
+ <p>{icon ?? 'wip'}</p>
  </div>
  );
 }

src/pages/_document.tsx

@@ -29,7 +29,7 @@ export default function Document() {
  __html: `
  if (
  localStorage.theme === 'dark' ||
- (!('theme' in localStorage) &&
+ (!localStorage.get('theme') &&
  window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
  document.documentElement.classList.add('dark');