From 304f2e6b8e42d06efbfecd3746120be042518ccd Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Fri, 15 Nov 2024 23:05:56 +0000
Subject: [PATCH] [Portal] Feature: Contract deploy button (#5434)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces the `ContractDeployCard` component to the application, allowing users to deploy contracts with a specified name and link. It enhances the user interface by providing a structured card layout for contract deployment.

### Detailed summary
- Added `ContractDeployCard` component.
- Accepts `contractName`, optional `description`, and `href` props.
- Displays a title, description, and a "Deploy Now" link.
- Utilizes `Link` from `next/link` for navigation.
- Includes usage documentation in the code comments.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../Document/ContractDeployCard.tsx           | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 apps/portal/src/components/Document/ContractDeployCard.tsx

diff --git a/apps/portal/src/components/Document/ContractDeployCard.tsx b/apps/portal/src/components/Document/ContractDeployCard.tsx
new file mode 100644
index 00000000000..f6417207999
--- /dev/null
+++ b/apps/portal/src/components/Document/ContractDeployCard.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { Paragraph } from "./Paragraph";
+
+/**
+ * Usage:
+ * ```tsx
+ * <ContractDeployCard contractName={"ERC20Modular"} href="deploy-link" />
+ * ```
+ */
+export function ContractDeployCard(props: {
+  contractName: string;
+  description?: string;
+  href: string;
+}) {
+  return (
+    <div className="my-4 rounded-lg border bg-b-800 p-4">
+      <div className="mb-2 font-semibold text-lg ">
+        Deploy {props.contractName}
+      </div>
+      <Paragraph className="mb-5 text-base text-f-300">
+        {props.description ||
+          `The ${props.contractName} is available to deploy on Explore. Deploy it now through dashboard.`}
+      </Paragraph>
+      <div className="flex">
+        <Link
+          href={props.href}
+          target="_blank"
+          className="inline-flex items-center rounded-lg border bg-[#DB2877] text-sm duration-200 hover:border-f-300"
+        >
+          <div className="border-l-2 p-2.5 font-semibold">Deploy Now</div>
+        </Link>
+      </div>
+    </div>
+  );
+}