Updated next js previews

firecmsco · Dec 6, 2024 · 567f03d · 567f03d
1 parent 1df3102
commit 567f03d
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 71 deletions.
diff --git a/examples/example_next/src/app/cms/collections/components/CMSBlogPreview.tsx b/examples/example_next/src/app/cms/collections/components/CMSBlogPreview.tsx
@@ -2,9 +2,13 @@ import { BlogEntry, BlogEntryWithId } from "@/app/common/types";
 import { convertBlogEntry } from "@/app/common/database";
 import React, { useEffect } from "react";
 import { BlogEntryView } from "@/app/common/components/BlogEntryView";
-import { CircularProgress } from "@firecms/ui";
+import { Button, CircularProgress, OpenInNewIcon } from "@firecms/ui";
+import Link from "next/link";
 
-export function CMSBlogPreview({ blogEntry, id }: {
+export function CMSBlogPreview({
+                                   blogEntry,
+                                   id
+                               }: {
     blogEntry?: BlogEntry,
     id: string
 }) {
@@ -18,6 +22,17 @@ export function CMSBlogPreview({ blogEntry, id }: {
     if (!convertedBlogEntry) {
         return <CircularProgress/>;
     }
-    return <BlogEntryView blogEntry={convertedBlogEntry}/>;
+
+    return <div className={"relative"}>
+        <div className={"absolute top-4 right-4 flex w-full justify-end p-4"}>
+            <Link href={"/blog/" + id}
+                  target={"_blank"}>
+                <Button variant={"text"} color="text" size={"small"}>
+                    <OpenInNewIcon/> See blog entry in website
+                </Button>
+            </Link>
+        </div>
+        <BlogEntryView blogEntry={convertedBlogEntry}/>
+    </div>;
 
 }
diff --git a/examples/example_next/src/app/cms/collections/components/CMSProductPreview.tsx b/examples/example_next/src/app/cms/collections/components/CMSProductPreview.tsx
@@ -1,10 +1,14 @@
 import { Product, ProductWithId } from "@/app/common/types";
 import { convertProduct } from "@/app/common/database";
 import React, { useEffect } from "react";
-import { CircularProgress } from "@firecms/ui";
+import { Button, CircularProgress, OpenInNewIcon } from "@firecms/ui";
 import { ProductDetailView } from "@/app/common/components/ProductDetailView";
+import Link from "next/link";
 
-export function CMSBProductPreview({ product, id }: {
+export function CMSProductPreview({
+                                       product,
+                                       id
+                                   }: {
     product?: Product,
     id: string
 }) {
@@ -19,6 +23,14 @@ export function CMSBProductPreview({ product, id }: {
         return <CircularProgress/>;
     }
 
-    return <ProductDetailView product={convertedProduct}/>;
+    return <div className={"bg-surface-50 dark:bg-surface-900"}>
+        <div className={"flex w-full justify-end p-4"}>
+            <Link href={"/products/" + id}
+                  target={"_blank"}>
+                <Button variant={"outlined"} size={"small"}><OpenInNewIcon/> See product in website</Button>
+            </Link>
+        </div>
+        <ProductDetailView product={convertedProduct}/>
+    </div>;
 
 }
diff --git a/examples/example_next/src/app/cms/collections/products.tsx b/examples/example_next/src/app/cms/collections/products.tsx
@@ -1,7 +1,7 @@
 import { buildCollection, EnumValues } from "@firecms/core";
 import { localeCollection } from "./locales";
 import { Product } from "@/app/common/types";
-import { CMSBProductPreview } from "./components/CMSProductPreview";
+import { CMSProductPreview } from "./components/CMSProductPreview";
 
 export const categories: EnumValues = {
     art_and_decoration: "Art and decoration",
@@ -59,9 +59,9 @@ export const productsCollection = buildCollection<Product>({
     subcollections: [localeCollection],
     entityViews: [
         {
-            key: "product_preview",
+            key: "preview",
             name: "Product preview",
-            Builder: ({ modifiedValues, entity }) => <CMSBProductPreview
+            Builder: ({ modifiedValues, entity }) => <CMSProductPreview
                 id={entity?.id ?? "temp"}
                 product={modifiedValues}/>
         }

diff --git a/examples/example_next/src/app/common/components/ProductDetailView.tsx b/examples/example_next/src/app/common/components/ProductDetailView.tsx
@@ -1,14 +1,24 @@
 "use client";
 
 import React from "react";
-import { AddIcon, Button, CenteredView, Label, Markdown, RadioGroup, RadioGroupItem, Select, SelectItem } from "@firecms/ui";
+import {
+    AddIcon,
+    Button,
+    CenteredView,
+    Label,
+    Markdown,
+    RadioGroup,
+    RadioGroupItem,
+    Select,
+    SelectItem
+} from "@firecms/ui";
 import { useSnackbarController } from "@firecms/core";
 import { Product } from "../types";
 import { getCurrencySymbol } from "@/app/common/utils";
 
 export function ProductDetailView({
-                                         product
-                                     }: {
+                                      product
+                                  }: {
     product?: Product;
 }) {
 
@@ -25,16 +35,19 @@ export function ProductDetailView({
 
     return (
         <CenteredView>
-            <div className="grid md:grid-cols-2 gap-6 lg:gap-12 items-start max-w-6xl px-4 mx-auto py-6">
+            <div className="my-8 grid md:grid-cols-2 gap-6 lg:gap-12 items-start max-w-6xl px-4 mx-auto py-6">
                 <div className="grid md:grid-cols-5 gap-3 items-start">
                     <div className="hidden md:flex flex-col gap-3 items-start">
 
                         {product.images?.map((image, index) => (
                             <button
-                                key={`image_${index}`}
-                                onClick={() => setSelectedImage(image)}>
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    setSelectedImage(image)
+                                }}
+                                key={`image_${index}`}>
                                 <img src={image}
-                                     className="aspect-[5/6] object-contain bg-white"
+                                     className="aspect-[5/6] object-contain bg-white rounded"
                                      style={{
                                          height: 120,
                                          width: 100
@@ -50,30 +63,31 @@ export function ProductDetailView({
                                 height: 600,
                                 width: 900
                             }}
-                            className="bg-white aspect-[2/3] object-contain border border-surface-200 w-full rounded-lg overflow-hidden dark:border-surface-800"
+                            className="bg-white aspect-[2/3] object-contain w-full rounded-lg overflow-hidden"
                             src={selectedImage}/>}
                     </div>
                 </div>
                 <div className="grid gap-4 md:gap-10 items-start h-full content-center">
-                    <div className="flex items-start">
-                        <div className="grid gap-4">
-                            <h1 className="font-headers text-3xl lg:text-4xl">{product.name ?? "Product name"} </h1>
-                            <Markdown source={product.description}/>
-                            <div className="flex items-center gap-4">
-                                <div className="flex items-center gap-0.5">
-                                    <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
-                                    <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
-                                    <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
-                                    <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
-                                    <StarIcon
-                                        className="w-5 h-5 fill-primary-100 dark:fill-primary-900 stroke-primary-400 dark:stroke-primary-600"/>
-                                </div>
+                    <div className="grid gap-4">
+                        <div className="flex items-start">
+                            <h1 className="flex-grow font-headers text-3xl lg:text-4xl">{product.name ?? "Product name"} </h1>
+                            <div className="font-headers text-4xl font-medium ml-auto">
+                                {getCurrencySymbol(product.currency)}{product.price}
+                            </div>
+                        </div>
+                        <Markdown source={product.description}/>
+                        <div className="flex items-center gap-4">
+                            <div className="flex items-center gap-0.5">
+                                <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
+                                <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
+                                <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
+                                <StarIcon className="w-5 h-5 fill-primary-500 stroke-primary-500"/>
+                                <StarIcon
+                                    className="w-5 h-5 fill-primary-100 dark:fill-primary-900 stroke-primary-400 dark:stroke-primary-600"/>
                             </div>
                         </div>
-                        <div
-                            className="font-headers text-4xl font-medium ml-auto">{getCurrencySymbol(product.currency)}{product.price}</div>
                     </div>
-                    <div className="grid gap-4 md:gap-10">
+                    <div className="grid gap-4">
                         <div className="grid gap-2">
                             <Label className="text-base" htmlFor="color">
                                 Color
@@ -149,6 +163,7 @@ export function ProductDetailView({
                                 Quantity
                             </Label>
                             <Select size={"medium"}
+                                    fullWidth
                                     value={String(quantity)}
                                     onValueChange={(value) => setQuantity(Number(value))}>
                                 <SelectItem value="1">1</SelectItem>

diff --git a/examples/example_pro/src/template/collections/products.tsx b/examples/example_pro/src/template/collections/products.tsx
@@ -22,7 +22,7 @@ export const productsCollection = buildCollection<Product>({
     subcollections: [localeCollection],
     entityViews: [
         {
-            key: "product_preview",
+            key: "preview",
             name: "Sample preview",
             Builder: ProductDetailPreview
         }

diff --git a/...ges/cli/templates/template_next_pro/src/app/cms/collections/components/CMSBlogPreview.tsx b/...ges/cli/templates/template_next_pro/src/app/cms/collections/components/CMSBlogPreview.tsx
@@ -2,9 +2,13 @@ import { BlogEntry, BlogEntryWithId } from "@/app/common/types";
 import { convertBlogEntry } from "@/app/common/database";
 import React, { useEffect } from "react";
 import { BlogEntryView } from "@/app/common/components/BlogEntryView";
-import { CircularProgress } from "@firecms/ui";
+import { Button, CircularProgress, OpenInNewIcon } from "@firecms/ui";
+import Link from "next/link";
 
-export function CMSBlogPreview({ blogEntry, id }: {
+export function CMSBlogPreview({
+                                   blogEntry,
+                                   id
+                               }: {
     blogEntry?: BlogEntry,
     id: string
 }) {
@@ -18,6 +22,17 @@ export function CMSBlogPreview({ blogEntry, id }: {
     if (!convertedBlogEntry) {
         return <CircularProgress/>;
     }
-    return <BlogEntryView blogEntry={convertedBlogEntry}/>;
+
+    return <div className={"relative"}>
+        <div className={"absolute top-4 right-4 flex w-full justify-end p-4"}>
+            <Link href={"/blog/" + id}
+                  target={"_blank"}>
+                <Button variant={"text"} color="text" size={"small"}>
+                    <OpenInNewIcon/> See blog entry in website
+                </Button>
+            </Link>
+        </div>
+        <BlogEntryView blogEntry={convertedBlogEntry}/>
+    </div>;
 
 }
diff --git a/.../cli/templates/template_next_pro/src/app/cms/collections/components/CMSProductPreview.tsx b/.../cli/templates/template_next_pro/src/app/cms/collections/components/CMSProductPreview.tsx
@@ -1,10 +1,14 @@
+import React, { useEffect } from "react";
+import Link from "next/link";
+import { Button, CircularProgress, OpenInNewIcon } from "@firecms/ui";
 import { Product, ProductWithId } from "@/app/common/types";
 import { convertProduct } from "@/app/common/database";
-import React, { useEffect } from "react";
-import { CircularProgress } from "@firecms/ui";
 import { ProductDetailView } from "@/app/common/components/ProductDetailView";
 
-export function CMSBProductPreview({ product, id }: {
+export function CMSProductPreview({
+                                       product,
+                                       id
+                                   }: {
     product?: Product,
     id: string
 }) {
@@ -19,6 +23,14 @@ export function CMSBProductPreview({ product, id }: {
         return <CircularProgress/>;
     }
 
-    return <ProductDetailView product={convertedProduct}/>;
+    return <div className={"bg-surface-50 dark:bg-surface-900"}>
+        <div className={"flex w-full justify-end p-4"}>
+            <Link href={"/products/" + id}
+                  target={"_blank"}>
+                <Button variant={"outlined"} size={"small"}><OpenInNewIcon/> See product in website</Button>
+            </Link>
+        </div>
+        <ProductDetailView product={convertedProduct}/>
+    </div>;
 
 }
diff --git a/packages/cli/templates/template_next_pro/src/app/cms/collections/products.tsx b/packages/cli/templates/template_next_pro/src/app/cms/collections/products.tsx
@@ -1,7 +1,7 @@
 import { buildCollection, EnumValues } from "@firecms/core";
 import { localeCollection } from "./locales";
 import { Product } from "@/app/common/types";
-import { CMSBProductPreview } from "./components/CMSProductPreview";
+import { CMSProductPreview } from "./components/CMSProductPreview";
 
 export const categories: EnumValues = {
     art_and_decoration: "Art and decoration",
@@ -59,9 +59,9 @@ export const productsCollection = buildCollection<Product>({
     subcollections: [localeCollection],
     entityViews: [
         {
-            key: "product_preview",
+            key: "preview",
             name: "Product preview",
-            Builder: ({ modifiedValues, entity }) => <CMSBProductPreview
+            Builder: ({ modifiedValues, entity }) => <CMSProductPreview
                 id={entity?.id ?? "temp"}
                 product={modifiedValues}/>
         }