Staging

app/components/navigation/navbar/index.tsx

@@ -33,6 +33,11 @@ const Navbar = ({ toggle }: { toggle: () => void }) => {
  <p>Home</p>
  </Link>
  </li>
+ <li>
+ <Link href="/pricing">
+ <p>Pricing</p>
+ </Link>
+ </li>
  <li>
  <Link href="/contacts">
  <p>Contacts</p>

app/components/navigation/sidebar/index.tsx

@@ -30,6 +30,9 @@ const Sidebar = ({
  <li>
  <Link href="/" onClick={toggle}><p>Home</p></Link>
  </li>
+ <li>
+ <Link href="/pricing" onClick={toggle}><p>Pricing</p></Link>
+ </li>
  <li>
  <Link href="/contacts" onClick={toggle}><p>Contacts</p></Link>
  </li>

app/pricing/FeatureItem.tsx

@@ -0,0 +1,19 @@
+export default function FeatureItem(props: { text: string }) {
+ return (<li className="flex items-center">
+ <svg
+ className=" text-white text-xs bg-green-500 rounded-full mr-2 p-1"
+ fill="none"
+ height="24"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <polyline points="20 6 9 17 4 12" />
+ </svg>
+ {props.text}
+ </li>)
+}

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 (
+ <div className="min-h-screen w-full py-12 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-zinc-900 dark:to-zinc-800 flex items-center justify-center">
+ <main className="container px-4 md:px-6">
+ <div className="grid grid-cols-1 gap-6 mt-8 md:grid-cols-3 md:gap-8">
+ <div className="flex flex-col p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-gray-300">
+ <div>
+ <h3 className="text-2xl font-bold text-center">Free</h3>
+ <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+ <span className="text-4xl font-bold">$0</span>/ month
+ </div>
+ <ul className="mt-4 space-y-2">
+ <FeatureItem text="Single Shard" />
+ <FeatureItem text="Online Support" />
+ </ul>
+ </div>
+ <Link className="mt-6" href="/sandbox">
+ <Button className="w-full">Get Started</Button>
+ </Link>
+ </div>
+ <div className="relative flex flex-col p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-purple-500">
+ <div className="px-3 py-1 text-sm text-white bg-gradient-to-r from-pink-500 to-purple-500 rounded-full inline-block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+ Coming Soon
+ </div>
+ <div>
+ <h3 className="text-2xl font-bold text-center">Standard</h3>
+ <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+ <span className="text-4xl font-bold">$X</span>/ month
+ </div>
+ <ul className="mt-4 space-y-2">
+ {/* <FeatureItem text="Single Shard" />
+ <FeatureItem text="720p Video Rendering" /> */}
+ </ul>
+ </div>
+ <Link className="mt-6" href="/sandbox">
+ <Button className="w-full bg-gradient-to-r from-pink-500 to-purple-500">Get Started</Button>
+ </Link>
+ </div>
+ <div className="relative flex flex-col p-6 bg-white shadow-lg rounded-lg dark:bg-zinc-850 justify-between border border-gray-300">
+ <div className="px-3 py-1 text-sm text-white bg-gradient-to-r from-slate-900 to-slate-600 rounded-full inline-block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+ Coming Soon
+ </div>
+ <div>
+ <h3 className="text-2xl font-bold text-center">Enterprise</h3>
+ <div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
+ <span className="text-4xl font-bold">$Y</span>/ month
+ </div>
+ <ul className="mt-4 space-y-2">
+ {/* <FeatureItem text="Single Shard" />
+ <FeatureItem text="720p Video Rendering" /> */}
+ </ul>
+ </div>
+ <Link className="mt-6" href="/sandbox">
+ <Button className="w-full">Get Started</Button>
+ </Link>
+ </div>
+ </div>
+ </main>
+ </div>
+ )
+}

app/sandbox/CypherInput.tsx

@@ -81,7 +81,7 @@ export function CypherInput(props: { graphs: string[], onSubmit: (query: string)
  <form className="flex items-center py-4 space-x-4" onSubmit={handleSubmit}>
  <Label htmlFor="cypher">Query:</Label>
  <Input type="text" id="cypher" name="cypher" value={query} onChange={handleChange} />
- <Button className="rounded-full bg-blue-600 p-2 text-slate-50" type="submit">Submit</Button>
+ <Button className="rounded-full bg-blue-600 p-2 text-slate-50" type="submit">Send</Button>
  </form>
  {/* Show an error message if the query is invalid */}
  {!valid && <p className="text-red-600">Invalid Cypher query. Please check the syntax.</p>}

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 (
  <>
  <Dialog>
@@ -36,10 +25,10 @@ export function DatabaseDetails(props: { sandbox: Sandbox, onDelete: () => void
  <Button className="rounded-full bg-blue-600 p-4 text-slate-50" onClick={props.onDelete}>Delete Sandbox</Button>
  </DialogContent>
  </Dialog>
- <div>Host: <Button className="bg-transparent text-blue-600 p-2" onClick={copyToClipboard}>{sandbox.host}</Button></div>
- <div>Port: <Button className="bg-transparent text-blue-600 p-2" onClick={copyToClipboard}>{sandbox.port}</Button></div>
- <div>Password: <Button className="bg-transparent text-blue-600 p-2" onClick={copyToClipboard}>{sandbox.password}</Button></div>
- <div>Redis URL: <Button className="bg-transparent text-blue-600 p-2" onClick={copyToClipboard}>{redisURL}</Button></div>
+ <DatabaseLine label="Host" value={sandbox.host} />
+ <DatabaseLine label="Port" value={sandbox.port.toString()} />
+ <DatabaseLine label="Password" value={sandbox.password} />
+ <DatabaseLine label="Redis URL" value={redisURL} />
  </>
  );
 }

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 (
+ <div>{props.label}: <Button className="bg-transparent text-blue-600 p-2 hover:text-slate-50" onClick={copyToClipboard}>
+ {props.value}&ensp; 
+ <svg
+ className=" h-4 w-4"
+ fill="none"
+ height="24"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <rect height="14" rx="2" ry="2" width="14" x="8" y="8" />
+ <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+ </svg>
+ </Button></div>
+ );
+}

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<Sandbox | undefined>(undefined)
  const [loadingState, setLoading] = useState(State.InitialLoading)
-
  const { toast } = useToast()
 
  // fetch sandbox details if exists