diff --git a/app/components/navigation/navbar/index.tsx b/app/components/navigation/navbar/index.tsx
index 5c058ee..4ca2eca 100644
--- a/app/components/navigation/navbar/index.tsx
+++ b/app/components/navigation/navbar/index.tsx
@@ -33,6 +33,11 @@ const Navbar = ({ toggle }: { toggle: () => void }) => {
Home
+
+
+ Pricing
+
+
Contacts
diff --git a/app/components/navigation/sidebar/index.tsx b/app/components/navigation/sidebar/index.tsx
index e7b339b..b17bcfa 100644
--- a/app/components/navigation/sidebar/index.tsx
+++ b/app/components/navigation/sidebar/index.tsx
@@ -30,6 +30,9 @@ const Sidebar = ({
Home
+
+ Pricing
+
Contacts
diff --git a/app/pricing/FeatureItem.tsx b/app/pricing/FeatureItem.tsx
new file mode 100644
index 0000000..aa45bdb
--- /dev/null
+++ b/app/pricing/FeatureItem.tsx
@@ -0,0 +1,19 @@
+export default function FeatureItem(props: { text: string }) {
+ return (
+
+ {props.text}
+ )
+}
\ No newline at end of file
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
new file mode 100644
index 0000000..fa4a038
--- /dev/null
+++ b/app/pricing/page.tsx
@@ -0,0 +1,69 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/rRBlufM
+ */
+import { Button } from "@/components/ui/button"
+import FeatureItem from "./FeatureItem"
+import Link from "next/link"
+
+export default function Page() {
+ return (
+
+
+
+
+
+
Free
+
+ $0/ month
+
+
+
+
+
+
+
+
+
+ Coming Soon
+
+
+
Standard
+
+ $X/ month
+
+
+
+
+
+
+
+
+
+ Coming Soon
+
+
+
Enterprise
+
+ $Y/ month
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/sandbox/CypherInput.tsx b/app/sandbox/CypherInput.tsx
index aa54a01..b8ecb3f 100644
--- a/app/sandbox/CypherInput.tsx
+++ b/app/sandbox/CypherInput.tsx
@@ -81,7 +81,7 @@ export function CypherInput(props: { graphs: string[], onSubmit: (query: string)
{/* Show an error message if the query is invalid */}
{!valid && Invalid Cypher query. Please check the syntax.
}
diff --git a/app/sandbox/DatabaseDetails.tsx b/app/sandbox/DatabaseDetails.tsx
index c18ac6b..840d3c1 100644
--- a/app/sandbox/DatabaseDetails.tsx
+++ b/app/sandbox/DatabaseDetails.tsx
@@ -2,23 +2,12 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Di
import { Button } from "@/components/ui/button"
import { useToast } from "@/components/ui/use-toast"
import { Sandbox } from "@/app/api/db/sandbox";
-
+import { DatabaseLine } from "./DatabaseLine";
export function DatabaseDetails(props: { sandbox: Sandbox, onDelete: () => void }) {
- const { toast } = useToast()
-
- function copyToClipboard(event: any) {
- navigator.clipboard.writeText(event.target.innerText)
- toast({
- title: "Copied to clipboard",
- description: "The value has been copied to your clipboard.",
- })
- }
-
let sandbox = props.sandbox
let redisURL = `redis://${sandbox.password}@${sandbox.host}:${sandbox.port}`
- // Return the JSX element that renders the input box and a submit button
return (
<>
- Host:
- Port:
- Password:
- Redis URL:
+
+
+
+
>
);
}
diff --git a/app/sandbox/DatabaseLine.tsx b/app/sandbox/DatabaseLine.tsx
new file mode 100644
index 0000000..a635d63
--- /dev/null
+++ b/app/sandbox/DatabaseLine.tsx
@@ -0,0 +1,38 @@
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/components/ui/use-toast"
+import { Sandbox } from "@/app/api/db/sandbox";
+
+export function DatabaseLine(props: { label: string, value: string }) {
+
+ const { toast } = useToast()
+
+ function copyToClipboard(event: any) {
+ navigator.clipboard.writeText(event.target.innerText)
+ toast({
+ title: "Copied to clipboard",
+ description: "The value has been copied to your clipboard.",
+ })
+ }
+
+ return (
+ {props.label}:
+ );
+}
diff --git a/app/sandbox/page.tsx b/app/sandbox/page.tsx
index bdd5cf7..1eabb19 100644
--- a/app/sandbox/page.tsx
+++ b/app/sandbox/page.tsx
@@ -4,7 +4,6 @@ import { signIn } from "next-auth/react"
import { Sandbox } from "@/app/api/db/sandbox";
import { useState, useEffect, use } from 'react'
import { Button } from "@/components/ui/button"
-import Spinning from "../components/spinning";
import { useToast } from "@/components/ui/use-toast"
import { CypherInput } from "./CypherInput";
import { DatabaseDetails } from "./DatabaseDetails";
@@ -14,7 +13,6 @@ export default function Page() {
const [retry_count, retry] = useState(0)
const [sandbox, setSandbox] = useState(undefined)
const [loadingState, setLoading] = useState(State.InitialLoading)
-
const { toast } = useToast()
// fetch sandbox details if exists