feat(ui): product preview has been added

packages/ui/src/app/products/[name]/page.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@openui-org/react/components'
+import { Link } from 'next-view-transitions'
+import Image from 'next/image'
+import { ArrowLeft } from 'lucide-react'
+import imagen from '../../../../public/product-test.webp'
+import { ProductAccount } from '@/components/product-account'
+
+export default function Page({ params }: { params: { name: string } }) {
+  return (
+    <>
+      <header className="pt-5 px-16">
+        <Button asChild>
+          <Link href="/">
+            <ArrowLeft />
+          </Link>
+        </Button>
+      </header>
+      <div>
+        <div className="flex justify-center p-10 gap-10 flex-wrap">
+          <Image src={imagen} alt="imagen" className="bg-muted/90 object-cover backdrop-brightness-90 object-center aspect-square" width="500" height="500" />
+          <article className="w-full md:w-[400px] flex flex-col gap-4">
+            <h2 className="text-5xl font-bold">{params.name}</h2>
+            <p>$10</p>
+            <ProductAccount />
+            <Button>Add to cart</Button>
+            <figure>
+              <h3 className="font-semibold pb-3">Description</h3>
+              <p className="text-sm font-extralight text-muted-foreground">Lorem ipsum, dolor sit amet consectetur adipisicing elit. In illo sint totam numquam, blanditiis consectetur cum magni corrupti assumenda ratione molestiae ducimus dolores, suscipit voluptatem quibusdam ad hic quia tempora.</p>
+            </figure>
+          </article>
+        </div>
+      </div>
+    </>
+  )
+}

packages/ui/src/components/product-account.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { Button } from '@openui-org/react/components'
+import { useState } from 'react'
+
+export function ProductAccount() {
+  const [account, setAccount] = useState(1)
+  return (
+    <figure>
+      <h3 className="font-semibold pb-3">Quantity</h3>
+      <div className="flex gap-3 items-center">
+        <Button onClick={() => setAccount(account - 1)} className={`${account === 1 && 'pointer-events-none bg-primary/85'}`}>-</Button>
+        <span className="w-16 p-2 text-center rounded-sm bg-muted/90">{account}</span>
+        <Button onClick={() => setAccount(account + 1)}>+</Button>
+      </div>
+    </figure>
+  )
+}

packages/ui/src/components/product.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link'
+import { Link } from 'next-view-transitions'
 import Image from 'next/image'
 import clsx from 'clsx'
 import { ShoppingBag } from 'lucide-react'
@@ -15,7 +15,7 @@ interface ProductProps {
 export function Product(props: ProductProps) {
   return (
 
-    <Link href="#" className="group">
+    <Link href={`/products/${props.product.name?.replace(/ /g, '-').toLowerCase()}`} className="group">
       <div className="bg-muted/90 rounded overflow-hidden transition-all duration-500 relative aspect-square">
         <Image
           src={props.product.URL}