chore: update dependencies and refactor layout components for improve…

…d styling and functionality

package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-navigation-menu": "^1.2.1",

src/lib/context/theme-provider.tsx

@@ -1,11 +1,16 @@
 "use client"
 
 import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+import dynamic from "next/dynamic"
 
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
+const NextThemesProvider = dynamic(
+  () => import("next-themes").then((e) => e.ThemeProvider),
+  {
+    ssr: false,
+  }
+)
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 }

src/lib/data/collections.ts

@@ -28,7 +28,8 @@ export const getCollectionByHandle = cache(async function (
 
 export const getCollectionsWithProducts = cache(
   async (countryCode: string): Promise<HttpTypes.StoreCollection[] | null> => {
-    const { collections } = await getCollectionsList(0, 3)
+    // TODO: Make the limit and offset dynamic
+    const { collections } = await getCollectionsList(0, 10)
 
     if (!collections) {
       return null
@@ -39,6 +40,7 @@ export const getCollectionsWithProducts = cache(
       .filter(Boolean) as string[]
 
     const { response } = await getProductsList({
+      pageParam: 0,
       queryParams: { collection_id: collectionIds },
       countryCode,
     })

src/modules/common/components/line-item-options/index.tsx

@@ -1,24 +1,30 @@
 import { HttpTypes } from "@medusajs/types"
 import { Text } from "@medusajs/ui"
+import { cn } from "@/lib/utils/cn"
 
 type LineItemOptionsProps = {
   variant: HttpTypes.StoreProductVariant | undefined
   "data-testid"?: string
   "data-value"?: HttpTypes.StoreProductVariant
+  className?: string
 }
 
 const LineItemOptions = ({
   variant,
   "data-testid": dataTestid,
   "data-value": dataValue,
+  className,
 }: LineItemOptionsProps) => {
   return (
     <Text
       data-testid={dataTestid}
       data-value={dataValue}
-      className="inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
+      className={cn(
+        "inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis",
+        className
+      )}
     >
-      Variant: {variant?.title}
+      {variant?.title}
     </Text>
   )
 }

src/modules/common/components/line-item-price/index.tsx

@@ -7,9 +7,14 @@ import { convertToLocale } from "@/lib/utils/money"
 type LineItemPriceProps = {
   item: HttpTypes.StoreCartLineItem | HttpTypes.StoreOrderLineItem
   style?: "default" | "tight"
+  className?: string
 }
 
-const LineItemPrice = ({ item, style = "default" }: LineItemPriceProps) => {
+const LineItemPrice = ({
+  item,
+  style = "default",
+  className,
+}: LineItemPriceProps) => {
   const { currency_code, calculated_price_number, original_price_number } =
     getPricesForVariant(item.variant) ?? {}
 
@@ -49,9 +54,13 @@ const LineItemPrice = ({ item, style = "default" }: LineItemPriceProps) => {
           </>
         )}
         <span
-          className={cn("text-base-regular", {
-            "text-ui-fg-interactive": hasReducedPrice,
-          })}
+          className={cn(
+            "text-base-regular",
+            {
+              "text-ui-fg-interactive": hasReducedPrice,
+            },
+            className
+          )}
           data-testid="product-price"
         >
           {convertToLocale({

src/modules/home/components/featured-products/product-rail/index.tsx

@@ -28,7 +28,6 @@ export default function ProductRail({
         {products &&
           products.map((product) => (
             <li key={product.id}>
-              {/* @ts-ignore */}
               <ProductPreview product={product} region={region} isFeatured />
             </li>
           ))}

src/modules/home/components/hero/index.tsx

@@ -1,31 +1,32 @@
-import { Github } from "@medusajs/icons"
 import { Button, Heading } from "@medusajs/ui"
+// import { GithubIcon } from "lucide-react"
+import { GitHubLogoIcon } from "@radix-ui/react-icons"
 
 const Hero = () => {
   return (
-    <div className="h-[75vh] w-full border-b border-ui-border-base relative bg-ui-bg-subtle">
-      <div className="absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:p-32 gap-6">
+    <div className="relative h-[75vh] w-full border-b border-ui-border-base bg-ui-bg-subtle shadow-inner-overlay-md">
+      <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-1 text-center small:p-32 p-4">
+        <span className="flex flex-row items-end gap-1.5">
+          <h1 className="text-lg font-normal leading-10 text-ui-fg-base">
+            Storefront UI Template
+          </h1>
+          <h2 className="text-xs font-medium leading-9 text-ui-fg-subtle">
+            by Mohmdev
+          </h2>
+        </span>
+
         <span>
-          <Heading
-            level="h1"
-            className="text-3xl leading-10 text-ui-fg-base font-normal"
-          >
-            Ecommerce Starter Template
-          </Heading>
           <Heading
             level="h2"
-            className="text-3xl leading-10 text-ui-fg-subtle font-normal"
+            className="text-lg md:text-xl font-normal  text-ui-fg-subtle mb-6"
           >
-            Powered by Medusa and Next.js
+            Powered by Next.js 15 and Medusa 2.0
           </Heading>
         </span>
-        <a
-          href="https://github.com/medusajs/nextjs-starter-medusa"
-          target="_blank"
-        >
+        <a href="https://github.com/mohmdev/nextjs-medusa-2.0" target="_blank">
           <Button variant="secondary">
             View on GitHub
-            <Github />
+            <GitHubLogoIcon />
           </Button>
         </a>
       </div>