121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import type IShortcode from "@/interfaces/IShortcode";
|
|
|
|
interface ShortcodeDialogProps {
|
|
onSave: (shortcode: Omit<IShortcode, "id">) => void;
|
|
}
|
|
|
|
export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const [code, setCode] = useState("");
|
|
const [type, setType] = useState<"value" | "media">("value");
|
|
const [value, setValue] = useState("");
|
|
const [mediaId, setMediaId] = useState("");
|
|
|
|
const handleSave = () => {
|
|
onSave({ code, type, value, media_id: mediaId });
|
|
setOpen(false);
|
|
resetForm();
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setCode("");
|
|
setType("value");
|
|
setValue("");
|
|
setMediaId("");
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline">Add New Shortcode</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Add New Shortcode</DialogTitle>
|
|
<DialogDescription>
|
|
Create a new shortcode here. Click save when you're
|
|
done.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="code" className="text-right">
|
|
Code
|
|
</Label>
|
|
<Input
|
|
id="code"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value)}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
<Tabs
|
|
defaultValue={type}
|
|
onValueChange={(v) => setType(v as "value" | "media")}
|
|
className="w-full"
|
|
>
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="value">Value</TabsTrigger>
|
|
<TabsTrigger value="media">Media</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="value">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="value" className="text-right">
|
|
Value
|
|
</Label>
|
|
<Input
|
|
id="value"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="media">
|
|
<div className="grid grid-cols-4 items-center gap-4">
|
|
<Label htmlFor="mediaId" className="text-right">
|
|
Media ID
|
|
</Label>
|
|
<Input
|
|
id="mediaId"
|
|
value={mediaId}
|
|
onChange={(e) => setMediaId(e.target.value)}
|
|
className="col-span-3"
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="submit" onClick={handleSave}>
|
|
Save shortcode
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|