moving ui components to own folder 🧹

app/page.tsx

@@ -1,8 +1,5 @@
-import { Button } from '@/components/ui/button';
-import { Carousel } from 'components/carousel';
-import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
-import Link from 'next/link';
+import { Carousel } from 'components/ui/carousel';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';

components/cart/add-to-cart.tsx

@@ -3,7 +3,7 @@
 import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
+import LoadingDots from 'components/ui/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';

components/cart/delete-item-button.tsx

@@ -1,5 +1,5 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import LoadingDots from 'components/loading-dots';
+import LoadingDots from 'components/ui/loading-dots';
 import { useRouter } from 'next/navigation';
 
 import clsx from 'clsx';

components/cart/edit-item-quantity-button.tsx

@@ -4,7 +4,7 @@ import { useTransition } from 'react';
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { removeItem, updateItemQuantity } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
+import LoadingDots from 'components/ui/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
 
 export default function EditItemQuantityButton({

components/cart/modal.tsx

@@ -2,7 +2,7 @@
 
 import { Dialog, Transition } from '@headlessui/react';
 import { ShoppingCartIcon } from '@heroicons/react/24/outline';
-import Price from 'components/price';
+import Price from 'components/ui/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';

components/grid/tile.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import Image from 'next/image';
-import Label from '../label';
+import Label from '../ui/label';
 
 export function GridTileImage({
   isInteractive = true,

components/layout/footer.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import FooterMenu from 'components/layout/footer-menu';
-import LogoSquare from 'components/logo-square';
+import LogoSquare from 'components/ui/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Suspense } from 'react';
 

components/layout/navbar/index.tsx

@@ -1,6 +1,6 @@
 import Cart from 'components/cart';
 import OpenCart from 'components/cart/open-cart';
-import LogoType from 'components/logo-type';
+import LogoType from 'components/ui/logo-type';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';

components/product/variant-details.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import Price from "components/price";
+import Price from "components/ui/price";
 import { Product, ProductVariant } from "lib/shopify/types";
 import { useState } from "react";
 import { VariantSelector } from "./variant-selector";

components/ui/carousel.tsx

@@ -1,10 +1,12 @@
 import { getCollectionProducts } from 'lib/shopify';
 import Link from 'next/link';
-import { GridTileImage } from './grid/tile';
+import { GridTileImage } from '../grid/tile';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
   const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
+  console.log("🐡🐠🐬 products", products);
+  
 
   if (!products?.length) return null;
 

components/ui/label.tsx

@@ -21,7 +21,8 @@ const Label = ({
       <div className="flex items-center rounded-full border bg-white/70 p-1 text-[10px] font-semibold text-black backdrop-blur-md @[275px]/label:text-xs dark:border-neutral-800 dark:bg-black/70 dark:text-white">
         <h3 className="mr-4 inline pl-2 leading-none tracking-tight">{title}</h3>
         <Price
-          className="flex-none rounded-full bg-gray-600 p-2 text-white"
+          // className="flex-none rounded-full bg-gray-600 p-2 text-white"
+          className="flex-none text-gray-600 text-bold"
           amount={amount}
           currencyCode={currencyCode}
           currencyCodeClassName="hidden @[275px]/label:inline"

components/ui/logo-square.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import LogoIcon from './icons/logo';
+import LogoIcon from '../icons/logo';
 
 export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
   return (