|
|
@@ -1,22 +1,30 @@
|
|
|
import React from "react";
|
|
|
import { CurrencyDollarSolid, NextJs, SquaresPlusSolid } from "@medusajs/icons";
|
|
|
-import { Badge, Heading, Text } from "@medusajs/ui";
|
|
|
+import { IconBadge, Heading, Text } from "@medusajs/ui";
|
|
|
|
|
|
const OrderDetailNextjs = () => {
|
|
|
- const queryParams = `?ref=onboarding&type=${process.env.MEDUSA_ADMIN_ONBOARDING_TYPE || "nextjs"}`
|
|
|
+ const queryParams = `?ref=onboarding&type=${
|
|
|
+ process.env.MEDUSA_ADMIN_ONBOARDING_TYPE || "nextjs"
|
|
|
+ }`;
|
|
|
return (
|
|
|
<>
|
|
|
<Text size="small" className="mb-6">
|
|
|
- You finished the setup guide 🎉. You have now a complete ecommerce store with a backend, admin, and a Next.js storefront. Feel free to
|
|
|
- play around with each of these components to experience all commerce features that Medusa provides.
|
|
|
+ You finished the setup guide 🎉. You have now a complete ecommerce store
|
|
|
+ with a backend, admin, and a Next.js storefront. Feel free to play
|
|
|
+ around with each of these components to experience all commerce features
|
|
|
+ that Medusa provides.
|
|
|
</Text>
|
|
|
- <Heading level="h2" className="text-ui-fg-base pt-6 border-t border-ui-border-base border-solid mb-2">
|
|
|
+ <Heading
|
|
|
+ level="h2"
|
|
|
+ className="text-ui-fg-base pt-6 border-t border-ui-border-base border-solid mb-2"
|
|
|
+ >
|
|
|
Continue Building your Ecommerce Store
|
|
|
</Heading>
|
|
|
<Text size="small">
|
|
|
- Your ecommerce store provides all basic ecommerce features you need to start selling.
|
|
|
- You can add more functionalities, add plugins for third-party integrations, and customize the
|
|
|
- storefront’s look and feel to support your use case.
|
|
|
+ Your ecommerce store provides all basic ecommerce features you need to
|
|
|
+ start selling. You can add more functionalities, add plugins for
|
|
|
+ third-party integrations, and customize the storefront’s look and feel
|
|
|
+ to support your use case.
|
|
|
</Text>
|
|
|
<div className="grid grid-cols-3 gap-4 mt-6 pb-6 mb-6 border-b border-ui-border-base border-solid auto-rows-fr">
|
|
|
<a
|
|
|
@@ -24,22 +32,25 @@ const OrderDetailNextjs = () => {
|
|
|
target="_blank"
|
|
|
className="flex"
|
|
|
>
|
|
|
- <div
|
|
|
- className="p-3 rounded-rounded flex items-start bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover"
|
|
|
- >
|
|
|
+ <div className="p-3 rounded-rounded flex items-start bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
|
|
|
<div className="mr-4">
|
|
|
<div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
|
|
|
- <Badge type="icon">
|
|
|
+ <IconBadge>
|
|
|
<SquaresPlusSolid />
|
|
|
- </Badge>
|
|
|
+ </IconBadge>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <Text size="xsmall" weight="plus" className="mb-1 text-ui-fg-base">
|
|
|
+ <Text
|
|
|
+ size="xsmall"
|
|
|
+ weight="plus"
|
|
|
+ className="mb-1 text-ui-fg-base"
|
|
|
+ >
|
|
|
Install Plugins
|
|
|
</Text>
|
|
|
<Text size="small">
|
|
|
- Install plugins for payment, fulfillment, search, and more, and integrate them in your storefront.
|
|
|
+ Install plugins for payment, fulfillment, search, and more, and
|
|
|
+ integrate them in your storefront.
|
|
|
</Text>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -49,22 +60,25 @@ const OrderDetailNextjs = () => {
|
|
|
target="_blank"
|
|
|
className="flex"
|
|
|
>
|
|
|
- <div
|
|
|
- className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover"
|
|
|
- >
|
|
|
+ <div className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
|
|
|
<div className="mr-4">
|
|
|
<div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
|
|
|
- <Badge type="icon">
|
|
|
+ <IconBadge>
|
|
|
<CurrencyDollarSolid />
|
|
|
- </Badge>
|
|
|
+ </IconBadge>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <Text size="xsmall" weight="plus" className="mb-1 text-ui-fg-base">
|
|
|
+ <Text
|
|
|
+ size="xsmall"
|
|
|
+ weight="plus"
|
|
|
+ className="mb-1 text-ui-fg-base"
|
|
|
+ >
|
|
|
Add Commerce Features
|
|
|
</Text>
|
|
|
<Text size="small">
|
|
|
- Learn about all available commerce features in Medusa and how to add them in your storefront
|
|
|
+ Learn about all available commerce features in Medusa and how to
|
|
|
+ add them in your storefront
|
|
|
</Text>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,22 +88,25 @@ const OrderDetailNextjs = () => {
|
|
|
target="_blank"
|
|
|
className="flex"
|
|
|
>
|
|
|
- <div
|
|
|
- className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover"
|
|
|
- >
|
|
|
+ <div className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
|
|
|
<div className="mr-4">
|
|
|
<div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
|
|
|
- <Badge type="icon">
|
|
|
+ <IconBadge>
|
|
|
<NextJs />
|
|
|
- </Badge>
|
|
|
+ </IconBadge>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <Text size="xsmall" weight="plus" className="mb-1 text-ui-fg-base">
|
|
|
+ <Text
|
|
|
+ size="xsmall"
|
|
|
+ weight="plus"
|
|
|
+ className="mb-1 text-ui-fg-base"
|
|
|
+ >
|
|
|
Build with the Next.js Storefront
|
|
|
</Text>
|
|
|
<Text size="small">
|
|
|
- Learn about the Next.js starter storefront’s features and how to customize it.
|
|
|
+ Learn about the Next.js starter storefront’s features and how to
|
|
|
+ customize it.
|
|
|
</Text>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -105,7 +122,7 @@ const OrderDetailNextjs = () => {
|
|
|
our documentation
|
|
|
</a>
|
|
|
. If you like Medusa, please{" "}
|
|
|
- <a
|
|
|
+ <a
|
|
|
href="https://github.com/medusajs/medusa"
|
|
|
target="_blank"
|
|
|
className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
|
|
|
@@ -118,4 +135,4 @@ const OrderDetailNextjs = () => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
-export default OrderDetailNextjs
|
|
|
+export default OrderDetailNextjs;
|
Kasper