import { r as reactExports, n as namedRoutes, F as ForwardRef$3, G as GraphQLIcon, a as ForwardRef$5, b as ForwardRef$7, j as jsxRuntimeExports, s, g, L as Link } from "./index-Cr4zbAtA.js";
import { M as Metadata } from "./Metadata-aK5zM6ek.js";
import { F as ForwardRef$4 } from "./BoltIcon-CCQmsNnt.js";
import { F as ForwardRef$6 } from "./EnvelopeIcon-C8BgBGZW.js";
function HeartIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
  }));
}
const ForwardRef$2 = reactExports.forwardRef(HeartIcon);
function MagnifyingGlassCircleIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "m15.75 15.75-2.489-2.489m0 0a3.375 3.375 0 1 0-4.773-4.773 3.375 3.375 0 0 0 4.774 4.774ZM21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
  }));
}
const ForwardRef$1 = reactExports.forwardRef(MagnifyingGlassCircleIcon);
function RocketLaunchIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
  }));
}
const ForwardRef = reactExports.forwardRef(RocketLaunchIcon);
const features = [{
  name: "Dashboard",
  description: "A quick overview of your app. Monitor Database, GraphQL, API, and Network performance in real-time. Instantly view the most executed SQL and GraphQL Operations.",
  to: namedRoutes.home(),
  icon: ForwardRef$3
}, {
  name: "Monitoring",
  description: "Studio leverages OpenTelemetry data sent from your CedarJS app. Observe what traces and spans indicate about your app's health. Found a problem? Make adjustments and then compare the difference to assess the improvement.",
  to: namedRoutes.opentelemetryTraces(),
  icon: ForwardRef$4
}, {
  name: "GraphQL",
  description: "Explore your GraphQL API with ease. Visualize your GraphQL Schema. Evaluate GraphQL Operations and performance. Test your GraphQL API effortlessly in a fully-integrated GraphiQL Playground. Supports authenticated User Impersonation.",
  to: namedRoutes.graphqlSchema(),
  icon: GraphQLIcon
}, {
  name: "Database",
  description: "Enhance your understanding and usage of your Database and SQL. Visualize your Prisma database diagram. Explore your data model and its relations. Evaluate the performance of SQL statements in detail.",
  to: namedRoutes.databaseSchema(),
  icon: ForwardRef$5
}, {
  name: "Mailer",
  description: "Cedar Studio is closely integrated with CedarJS Mailer. Intercept emails during development. Monitor the emails being sent and received. Test and preview your email templates.",
  to: namedRoutes.mailerInbox(),
  icon: ForwardRef$6
}, {
  name: "Search",
  description: "We're always here to help. Quickly search the CedarJS Community, Documentation, and more. Get help to build your app faster. Just Command-K and go!",
  to: null,
  icon: ForwardRef$1
}, {
  name: "Settings",
  description: "Customize your Studio. See what features are enabled, and how User Impersonation is configured.",
  to: namedRoutes.settings(),
  icon: ForwardRef$7
}, {
  name: "Made with CedarJS",
  description: "Studio is built with CedarJS. It uses Realtime GraphQL to update data, cells for data fetching, authentication, routing for navigation, and more.",
  to: null,
  icon: ForwardRef$2
}, {
  name: "And more ...",
  description: "We're super excited about the future versions of Studio. Based on your valuable feedback and needs, we're planning to refine and expand Studio's features even further.  Check out our GitHub to see what we are working on.",
  to: null,
  icon: ForwardRef
}];
const AboutPage = () => {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-4", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Metadata, { title: "About", description: "About Cedar Studio" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-7xl px-6 lg:px-8", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mx-auto max-w-2xl lg:text-center", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-tremor-600 text-base font-semibold leading-7 text-tremor-brand dark:text-dark-tremor-brand", children: "About" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(s, { className: "font-3xl mt-2 tracking-tight sm:text-4xl", children: "Get to Know Cedar Studio" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-6 text-lg leading-8 text-tremor-content dark:text-dark-tremor-content", children: "Studio is your trusty companion for CedarJS development. It's here to make your coding journey smoother by helping you collaborate, visualize, and track your app's performance. Let's make coding more enjoyable and informative together!" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("dl", { className: "grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3", children: features.map((feature) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("dt", { className: "flex items-center gap-x-3 text-base font-bold leading-7 text-tremor-brand dark:text-dark-tremor-brand", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(g, { icon: feature.icon, className: "h-6 w-6", "aria-hidden": "true" }),
          feature.name
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("dd", { className: "mt-4 flex flex-auto flex-col text-base leading-7 text-tremor-content dark:text-dark-tremor-content", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "flex-auto", children: feature.description }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-6", children: feature.to && /* @__PURE__ */ jsxRuntimeExports.jsxs(Link, { to: feature.to, className: "text-sm font-semibold leading-6 text-tremor-content-emphasis dark:text-dark-tremor-content-emphasis", children: [
            "Try it! ",
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true", children: "→" })
          ] }) })
        ] })
      ] }, feature.name)) }) })
    ] })
  ] });
};
export {
  AboutPage as default
};
