From d71dc8e1afc431f249c29950b01a41f4f1b0ca69 Mon Sep 17 00:00:00 2001
From: Paul <phanminh65@gmail.com>
Date: Tue, 9 Apr 2024 19:01:29 +0700
Subject: [PATCH] sync demo

---
 app/components/SortFilter.tsx        |  2 +-
 app/routes/($locale).$.tsx           | 18 ++++----
 app/routes/($locale)._index.tsx      | 19 ++++-----
 app/sections/user-profiles/index.tsx | 61 ++++++++++++++++++++++++++++
 app/weaverse/components.ts           |  6 ++-
 5 files changed, 86 insertions(+), 20 deletions(-)
 create mode 100644 app/sections/user-profiles/index.tsx

diff --git a/app/components/SortFilter.tsx b/app/components/SortFilter.tsx
index 1056d5d..6b67929 100644
--- a/app/components/SortFilter.tsx
+++ b/app/components/SortFilter.tsx
@@ -346,7 +346,7 @@ export default function SortMenu() {
         className="absolute right-0 flex flex-col p-4 text-right rounded-sm bg-contrast"
       >
         {items.map((item) => (
-          <Menu.Item key={item.label}>
+          <Menu.Item key={item.key}>
             {() => (
               <Link
                 className={`block text-sm pb-2 px-3 ${
diff --git a/app/routes/($locale).$.tsx b/app/routes/($locale).$.tsx
index eb95afd..c185025 100644
--- a/app/routes/($locale).$.tsx
+++ b/app/routes/($locale).$.tsx
@@ -1,17 +1,21 @@
-import { WeaverseContent } from '~/weaverse';
-import { type LoaderFunctionArgs } from '@shopify/remix-oxygen';
+import {WeaverseContent} from '~/weaverse';
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {LoadPageParams} from '@weaverse/hydrogen';
 
-export async function loader({ context }: LoaderFunctionArgs) {
-  let weaverseData = await context.weaverse.loadPage({
+export async function loader({params, context, request}: LoaderFunctionArgs) {
+  const {language, country} = context.storefront.i18n;
+  let weaverseQuery: LoadPageParams = {
     type: 'CUSTOM',
-  });
-
+    locale: `${language}-${country}`.toLowerCase(),
+  };
+  let weaverseData = await context.weaverse.loadPage(weaverseQuery);
   if (weaverseData?.page?.id && !weaverseData.page.id.includes('fallback')) {
     return {
       weaverseData,
     };
   }
-  throw new Response(null, { status: 404 });
+  // If Weaverse Data not found, return 404
+  throw new Response(null, {status: 404});
 }
 
 export default function Component() {
diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
index bc21b4c..4e259bf 100644
--- a/app/routes/($locale)._index.tsx
+++ b/app/routes/($locale)._index.tsx
@@ -5,7 +5,7 @@ import {SHOP_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import type {PageType} from '@weaverse/hydrogen';
+import type {LoadPageParams, PageType} from '@weaverse/hydrogen';
 
 export const headers = routeHeaders;
 
@@ -13,15 +13,16 @@ export async function loader(args: LoaderFunctionArgs) {
   let {params, context} = args;
   let {language, country} = context.storefront.i18n;
 
-  let pageType: PageType = 'INDEX';
-  if (
-    params.locale &&
-    params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()
-  ) {
+  let locale = `${language}-${country}`.toLowerCase();
+  let weaverseQuery: LoadPageParams = {
+    type: 'INDEX',
+  };
+
+  if (params.locale && params.locale.toLowerCase() !== locale) {
     // If the locale URL param is defined, yet we still are on `EN-US`
     // the locale param must be invalid
     // Update for Weaverse: if it not locale, it probably is a custom page handle
-    pageType = 'CUSTOM';
+    weaverseQuery.type = 'CUSTOM';
   }
 
   let {shop} = await context.storefront.query(SHOP_QUERY);
@@ -29,9 +30,7 @@ export async function loader(args: LoaderFunctionArgs) {
 
   return defer({
     shop,
-    weaverseData: await context.weaverse.loadPage({
-      type: pageType,
-    }),
+    weaverseData: await context.weaverse.loadPage(weaverseQuery),
     analytics: {
       pageType: AnalyticsPageType.home,
     },
diff --git a/app/sections/user-profiles/index.tsx b/app/sections/user-profiles/index.tsx
new file mode 100644
index 0000000..f21324f
--- /dev/null
+++ b/app/sections/user-profiles/index.tsx
@@ -0,0 +1,61 @@
+import type {
+  HydrogenComponentProps,
+  HydrogenComponentSchema,
+} from '@weaverse/hydrogen';
+import {forwardRef} from 'react';
+
+const UserCard = () => {
+  return (
+    <div
+      className="border bg-card text-card-foreground rounded-lg overflow-hidden shadow-lg max-w-sm mx-auto hover:shadow-xl transition-all duration-200"
+      data-v0-t="card"
+    >
+      <img
+        alt="Profile picture"
+        className="object-cover w-full"
+        height="320"
+        src="https://cdn.shopify.com/s/files/1/0728/0410/6547/files/medium_3.webp?v=1702346343"
+        style={{aspectRatio: '320/320', objectFit: 'cover'}}
+        width="320"
+      />
+      <div className="p-4">
+        <h2 className="text-2xl font-bold hover:text-gray-700 transition-all duration-200">
+          Emily Johnson
+        </h2>
+        <h3 className="text-gray-500 hover:text-gray-600 transition-all duration-200">
+          Front-end Developer
+        </h3>
+        <p className="mt-2 text-gray-600 hover:text-gray-700 transition-all duration-200">
+          Passionate about creating interactive user interfaces.
+        </p>
+        <div className="flex mt-4 space-x-2">
+          <button className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground h-9 rounded-md px-3 w-full hover:bg-gray-700 hover:text-white transition-all duration-200">
+            Follow
+          </button>
+          <button className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent h-9 rounded-md px-3 w-full hover:border-gray-700 hover:text-gray-700 transition-all duration-200">
+            Message
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface UserProfilesProps extends HydrogenComponentProps {}
+const UserProfiles = forwardRef<HTMLDivElement, UserProfilesProps>(
+  (props, ref) => {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+        <UserCard />
+      </div>
+    );
+  },
+);
+
+export const schema: HydrogenComponentSchema = {
+  title: 'User Profiles',
+  type: 'user-profiles',
+  inspector: [],
+};
+
+export default UserProfiles;
diff --git a/app/weaverse/components.ts b/app/weaverse/components.ts
index c3406d2..b63ffe1 100644
--- a/app/weaverse/components.ts
+++ b/app/weaverse/components.ts
@@ -43,7 +43,8 @@ import * as SlideShowItem from '~/sections/SlideShow/SlideItems';
 import * as NewsLetter from '~/sections/newsletter';
 import * as ImageHotspot from '~/sections/image-hotspots/image-hotspot';
 import * as ImageHotspotItem from '~/sections/image-hotspots/items';
-import * as ProductList from '~/sections/product-list'
+import * as ProductList from '~/sections/product-list';
+import * as UserProfiles from '~/sections/user-profiles';
 
 export let components: HydrogenComponent[] = [
   ...commonComponents,
@@ -71,6 +72,7 @@ export let components: HydrogenComponent[] = [
   CountDownTimer,
   CountdownActions,
   NewsLetter,
+  UserProfiles,
   Blogs,
   BlogPost,
   AllProducts,
@@ -92,5 +94,5 @@ export let components: HydrogenComponent[] = [
   MetaDemo,
   SlideShow,
   SlideShowItem,
-  ProductList
+  ProductList,
 ];