@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
83 lines (82 loc) • 4.2 kB
JavaScript
"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { Button } from "@tohuhono/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@tohuhono/ui/card";
import { Input } from "@tohuhono/ui/input";
import { Label } from "@tohuhono/ui/label";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@tohuhono/ui/select";
import { Textarea } from "@tohuhono/ui/textarea";
function CardsReportIssue() {
const id = React.useId();
return /* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { children: [
/* @__PURE__ */ jsx(CardTitle, { children: "Report an issue" }),
/* @__PURE__ */ jsx(CardDescription, { children: "What area are you having problems with?" })
] }),
/* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6", children: [
/* @__PURE__ */ jsxs(
"div",
{
className: "\n grid gap-4\n sm:grid-cols-2\n ",
children: [
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: `area-${id}`, children: "Area" }),
/* @__PURE__ */ jsxs(Select, { defaultValue: "billing", children: [
/* @__PURE__ */ jsx(SelectTrigger, { id: `area-${id}`, "aria-label": "Area", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select" }) }),
/* @__PURE__ */ jsxs(SelectContent, { children: [
/* @__PURE__ */ jsx(SelectItem, { value: "team", children: "Team" }),
/* @__PURE__ */ jsx(SelectItem, { value: "billing", children: "Billing" }),
/* @__PURE__ */ jsx(SelectItem, { value: "account", children: "Account" }),
/* @__PURE__ */ jsx(SelectItem, { value: "deployments", children: "Deployments" }),
/* @__PURE__ */ jsx(SelectItem, { value: "support", children: "Support" })
] })
] })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: `security-level-${id}`, children: "Security Level" }),
/* @__PURE__ */ jsxs(Select, { defaultValue: "2", children: [
/* @__PURE__ */ jsx(
SelectTrigger,
{
id: `security-level-${id}`,
className: "line-clamp-1 w-full truncate",
"aria-label": "Security Level",
children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select level" })
}
),
/* @__PURE__ */ jsxs(SelectContent, { children: [
/* @__PURE__ */ jsx(SelectItem, { value: "1", children: "Severity 1 (Highest)" }),
/* @__PURE__ */ jsx(SelectItem, { value: "2", children: "Severity 2" }),
/* @__PURE__ */ jsx(SelectItem, { value: "3", children: "Severity 3" }),
/* @__PURE__ */ jsx(SelectItem, { value: "4", children: "Severity 4 (Lowest)" })
] })
] })
] })
]
}
),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: `subject-${id}`, children: "Subject" }),
/* @__PURE__ */ jsx(Input, { id: `subject-${id}`, placeholder: "I need help with..." })
] }),
/* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
/* @__PURE__ */ jsx(Label, { htmlFor: `description-${id}`, children: "Description" }),
/* @__PURE__ */ jsx(
Textarea,
{
id: `description-${id}`,
placeholder: "Please include all information relevant to your issue."
}
)
] })
] }),
/* @__PURE__ */ jsxs(CardFooter, { className: "justify-between space-x-2", children: [
/* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Cancel" }),
/* @__PURE__ */ jsx(Button, { children: "Submit" })
] })
] });
}
export {
CardsReportIssue
};