From 35e20bb45f4b282493ccee4bb19a7d3715beac56 Mon Sep 17 00:00:00 2001 From: Guy Korland Date: Wed, 4 Oct 2023 11:53:31 +0300 Subject: [PATCH 1/2] break to components: --- app/sandbox/CypherInput.tsx | 2 +- app/sandbox/DatabaseDetails.tsx | 21 +++++---------------- app/sandbox/DatabaseLine.tsx | 21 +++++++++++++++++++++ app/sandbox/page.tsx | 2 -- 4 files changed, 27 insertions(+), 19 deletions(-) create mode 100644 app/sandbox/DatabaseLine.tsx 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 ( <> @@ -36,10 +25,10 @@ export function DatabaseDetails(props: { sandbox: Sandbox, onDelete: () => void -
Host:
-
Port:
-
Password:
-
Redis URL:
+ + + + ); } diff --git a/app/sandbox/DatabaseLine.tsx b/app/sandbox/DatabaseLine.tsx new file mode 100644 index 0000000..78d6a03 --- /dev/null +++ b/app/sandbox/DatabaseLine.tsx @@ -0,0 +1,21 @@ +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 From 1abd27a1ca04e6fc7a14d35f8306ce0fa7c0f34a Mon Sep 17 00:00:00 2001 From: Guy Korland Date: Wed, 4 Oct 2023 14:51:30 +0300 Subject: [PATCH 2/2] add pricing --- app/components/navigation/navbar/index.tsx | 5 ++ app/components/navigation/sidebar/index.tsx | 3 + app/pricing/FeatureItem.tsx | 19 ++++++ app/pricing/page.tsx | 69 +++++++++++++++++++++ app/sandbox/DatabaseLine.tsx | 19 +++++- 5 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 app/pricing/FeatureItem.tsx create mode 100644 app/pricing/page.tsx 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/DatabaseLine.tsx b/app/sandbox/DatabaseLine.tsx index 78d6a03..a635d63 100644 --- a/app/sandbox/DatabaseLine.tsx +++ b/app/sandbox/DatabaseLine.tsx @@ -16,6 +16,23 @@ export function DatabaseLine(props: { label: string, value: string }) { } return ( -
    {props.label}:
    +
    {props.label}:
    ); }