feat:curated content detail
This commit is contained in:
parent
72c699a42a
commit
07b174ab47
|
|
@ -55,6 +55,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
|
|||
import { close, loading } from "@/lib/swal";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { htmlToString } from "@/utils/globals";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
const detailSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -443,8 +444,13 @@ export default function DetailImage() {
|
|||
<p className="text-blue-500">Kotak Saran (0)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button>Content Rewrite</Button>
|
||||
<Link
|
||||
href={
|
||||
"/shared/curated-content/giat-routine/image/detail/content-rewrite"
|
||||
}
|
||||
>
|
||||
<Button>Content Rewrite</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,349 @@
|
|||
"use client";
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import CustomEditor from "@/components/editor/custom-editor";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Link } from "@/i18n/routing";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
description: z
|
||||
.string()
|
||||
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
|
||||
creatorName: z.string().min(1, { message: "Creator diperlukan" }),
|
||||
// tags: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
});
|
||||
|
||||
const ContentRewritePage = () => {
|
||||
const [step, setStep] = useState("configuration");
|
||||
const [selectedLanguage, setSelectedLanguage] = useState("");
|
||||
const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
|
||||
const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
|
||||
const [selectedSize, setSelectedSize] = useState("");
|
||||
const [selectedSort, setSelectedSort] = useState("");
|
||||
const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
|
||||
type ImageSchema = z.infer<typeof imageSchema>;
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<ImageSchema>({
|
||||
resolver: zodResolver(imageSchema),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Content Rewrite</h2>
|
||||
<div className="flex items-center space-x-6 mb-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 flex items-center justify-center border-2 rounded-full ${
|
||||
step === "configuration"
|
||||
? "border-blue-500 text-blue-500"
|
||||
: "border-gray-400 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
●
|
||||
</div>
|
||||
<p
|
||||
className={
|
||||
step === "configuration"
|
||||
? "text-blue-500 font-semibold"
|
||||
: "text-gray-400"
|
||||
}
|
||||
>
|
||||
Configuration
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`flex-1 h-0.5 ${
|
||||
step === "draft"
|
||||
? "bg-blue-500 text-blue-500"
|
||||
: "bg-gray-400 text-gray-400"
|
||||
}`}
|
||||
></div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 flex items-center justify-center border-2 rounded-full ${
|
||||
step === "draft"
|
||||
? "border-blue-500 text-blue-500"
|
||||
: "border-gray-400 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
○
|
||||
</div>
|
||||
<p
|
||||
className={
|
||||
step === "draft"
|
||||
? "text-blue-500 font-semibold"
|
||||
: "text-gray-400"
|
||||
}
|
||||
>
|
||||
Draft
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`flex-1 h-0.5 ${
|
||||
step === "publish"
|
||||
? "bg-blue-500 text-blue-500"
|
||||
: "bg-gray-400 text-gray-400"
|
||||
}`}
|
||||
></div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className={`w-8 h-8 flex items-center justify-center border-2 rounded-full ${
|
||||
step === "publish"
|
||||
? "border-blue-500 text-blue-500"
|
||||
: "border-gray-400 text-gray-400"
|
||||
}`}
|
||||
>
|
||||
○
|
||||
</div>
|
||||
<p
|
||||
className={
|
||||
step === "publish"
|
||||
? "text-blue-500 font-semibold"
|
||||
: "text-gray-400"
|
||||
}
|
||||
>
|
||||
Publish
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{step === "configuration" && (
|
||||
<>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Bahasa</Label>
|
||||
<Select onValueChange={setSelectedLanguage}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="id">Indonesia</SelectItem>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Writing Style</Label>
|
||||
<Select onValueChange={setSelectedWritingStyle}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="friendly">Friendly</SelectItem>
|
||||
<SelectItem value="profesional">Profesional</SelectItem>
|
||||
<SelectItem value="informational">
|
||||
Informational
|
||||
</SelectItem>
|
||||
<SelectItem value="neutral">Neutral</SelectItem>
|
||||
<SelectItem value="witty">Witty</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 py-3 w-4/12">
|
||||
<Label>Article Size</Label>
|
||||
<Select onValueChange={setSelectedSize}>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="news">
|
||||
News (300 - 900 words)
|
||||
</SelectItem>
|
||||
<SelectItem value="info">
|
||||
Info (900 - 2000 words)
|
||||
</SelectItem>
|
||||
<SelectItem value="detail">
|
||||
Detail (2000 - 5000 words)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Label>Configuration</Label>
|
||||
<Input
|
||||
placeholder="Type your custom instruction here!"
|
||||
className="h-20"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setStep("draft")}
|
||||
className=" bg-blue-600 text-white"
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === "draft" && (
|
||||
<div>
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="accepted"
|
||||
// checked={filtered.includes("polri")}
|
||||
// onCheckedChange={(e) => handleFilter("polri", Boolean(e))}
|
||||
/>
|
||||
<label
|
||||
htmlFor="accepted"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Select All
|
||||
</label>
|
||||
</div>
|
||||
<div className="space-y-2 py-3">
|
||||
<div className="flex flex-row items-center">
|
||||
<Label className="w-[50px]">Sort by</Label>
|
||||
<Select onValueChange={setSelectedSort}>
|
||||
<SelectTrigger size="sm" className="w-[150px]">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="id">Indonesia</SelectItem>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{[
|
||||
{
|
||||
src: "/assets/img/image1.png",
|
||||
alt: "Article 1",
|
||||
title: "Kurang dari 24 Jam Polres Muara Enim Ungka...",
|
||||
},
|
||||
{
|
||||
src: "/assets/img/image3.png",
|
||||
alt: "Article 2",
|
||||
title: "Kurang dari 24 Jam Polres Muara Enim Ungka...",
|
||||
},
|
||||
{
|
||||
src: "/assets/img/image3.png",
|
||||
alt: "Article 3",
|
||||
title: "Polres Magelang Kota Konferensi Pers Terkait...",
|
||||
},
|
||||
].map((article, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="border rounded-md overflow-hidden relative"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="absolute top-2 left-2 w-5 h-5 cursor-pointer"
|
||||
/>
|
||||
|
||||
<img
|
||||
src={article.src}
|
||||
alt={article.alt}
|
||||
className="w-full h-40 object-cover"
|
||||
/>
|
||||
|
||||
<p className="p-2 text-sm">{article.title}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row justify-between mt-3">
|
||||
<Button
|
||||
onClick={() => setStep("configuration")}
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setStep("publish")}
|
||||
variant={"default"}
|
||||
color="primary"
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === "publish" && (
|
||||
<div>
|
||||
<div className="py-3">
|
||||
<div className="flex flex-row justify-between items-center mb-3">
|
||||
<Label>940 Words</Label>
|
||||
<Link
|
||||
href={`/contributor/content/image/update-seo/${selectedArticleId}`}
|
||||
>
|
||||
<Button
|
||||
className="mb-2"
|
||||
size="sm"
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomEditor
|
||||
onChange={onChange}
|
||||
// initialData={articleBody}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{/* {errors.description?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.description.message}
|
||||
</p>
|
||||
)} */}
|
||||
</div>
|
||||
<div className="flex flex-row justify-between mt-3">
|
||||
<Button
|
||||
onClick={() => setStep("configuration")}
|
||||
variant={"outline"}
|
||||
color="primary"
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setStep("publish")}
|
||||
variant={"default"}
|
||||
color="primary"
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContentRewritePage;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 828 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Loading…
Reference in New Issue