Syafrizal_Wd_Mahendra
/
TIFNGK_E41222719
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: use theme context state to child component

This commit is contained in:
Mahen 2026-04-13 12:05:17 +07:00
parent ff44c8c3df
commit 8be8b4c9a0
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/dashboards/AnalysisClient.tsx
View File

@ -6,8 +6,9 @@ import { Input } from "../ui/input";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import ResultSection from "./ResultSection"; import ResultSection from "./ResultSection";
import UrlInputList from "./UrlInputList"; import UrlInputList from "./UrlInputList";
import { useTheme } from "@/src/context/ThemeContext";
export default function AnalysisClient({ isDark }: { isDark: boolean }) { export default function AnalysisClient() {
const { const {
isValid, isValid,
errors, errors,
@ -23,19 +24,20 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
handleCancel, handleCancel,
setVisibleFields, setVisibleFields,
} = useAnalyseText(); } = useAnalyseText();
const { darkMode } = useTheme();
return ( return (
<div className="w-full mx-auto"> <div className="w-full mx-auto">
<form <form
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
className={`p-6 rounded-lg mb-8 ${isDark ? "bg-gray-800 border-transparent" : "bg-white border border-gray-200"} transition-all duration-500`} className={`p-6 rounded-lg mb-8 ${darkMode ? "bg-gray-800 border-transparent" : "bg-white border border-gray-200"} transition-all duration-500`}
> >
<div className="mb-4 flex items-center gap-2"> <div className="mb-4 flex items-center gap-2">
<Sparkles <Sparkles
className={`h-5 w-5 text-primary ${isDark ? "text-white" : "text-black"} transition-all duration-500`} className={`h-5 w-5 text-primary ${darkMode ? "text-white" : "text-black"} transition-all duration-500`}
/> />
<h3 <h3
className={`text-lg font-semibold ${isDark ? "text-white" : "text-black"} transition-all duration-500`} className={`text-lg font-semibold ${darkMode ? "text-white" : "text-black"} transition-all duration-500`}
> >
Analisis Sentimen Real-time Analisis Sentimen Real-time
</h3> </h3>
@ -45,14 +47,14 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="w-full"> <div className="w-full">
<label <label
className={`block mb-1 text-sm font-medium ${isDark ? "text-white" : "text-gray-700"} transition-all duration-500`} className={`block mb-1 text-sm font-medium ${darkMode ? "text-white" : "text-gray-700"} transition-all duration-500`}
> >
Tautan Produk 1 Tautan Produk 1
</label> </label>
<Input <Input
type="url" type="url"
placeholder="Contoh: https://tokopedia.com/..." placeholder="Contoh: https://tokopedia.com/..."
className={`${errors.url1 ? "border-sentiment-negative" : "focus:ring-primary"} ${isDark ? "bg-gray-800 text-white" : "bg-white"} transition-all duration-500 w-full`} className={`${errors.url1 ? "border-sentiment-negative" : "focus:ring-primary"} ${darkMode ? "bg-gray-800 text-white" : "bg-white"} transition-all duration-500 w-full`}
{...register("url1")} {...register("url1")}
/> />
{errors.url1 && ( {errors.url1 && (
@ -64,14 +66,14 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
<div className="w-full"> <div className="w-full">
<label <label
className={`block mb-1 text-sm font-medium ${isDark ? "text-white" : "text-gray-700"} transition-all duration-500`} className={`block mb-1 text-sm font-medium ${darkMode ? "text-white" : "text-gray-700"} transition-all duration-500`}
> >
Tautan Produk 2 Tautan Produk 2
</label> </label>
<Input <Input
type="url" type="url"
placeholder="Contoh: https://tokopedia.com/..." placeholder="Contoh: https://tokopedia.com/..."
className={`${errors.url2 ? "border-sentiment-negative" : "focus:ring-primary"} ${isDark ? "bg-gray-800 text-white" : "bg-white"} transition-all duration-500 w-full`} className={`${errors.url2 ? "border-sentiment-negative" : "focus:ring-primary"} ${darkMode ? "bg-gray-800 text-white" : "bg-white"} transition-all duration-500 w-full`}
{...register("url2")} {...register("url2")}
/> />
{errors.url2 && ( {errors.url2 && (
@ -87,7 +89,7 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
urlDatas={urlDatas} urlDatas={urlDatas}
visibleFields={visibleFields} visibleFields={visibleFields}
setVisibleFields={setVisibleFields} setVisibleFields={setVisibleFields}
isDark={isDark} isDark={darkMode}
/> />
{visibleFields < 2 && ( {visibleFields < 2 && (
@ -105,7 +107,7 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
border-dashed border border-primary/20 shadow-xs border-dashed border border-primary/20 shadow-xs
transition-all duration-500 animate-in fade-in zoom-in-95 transition-all duration-500 animate-in fade-in zoom-in-95
${visibleFields === 0 ? "w-full md:w-1/2" : "w-full"} ${visibleFields === 0 ? "w-full md:w-1/2" : "w-full"}
${isDark ? "bg-gray-800 text-white hover:bg-gray-900 border-dashed border border-white" : "text-black hover:bg-[#F8FBFF] "} ${darkMode ? "bg-gray-800 text-white hover:bg-gray-900 border-dashed border border-white" : "text-black hover:bg-[#F8FBFF] "}
`} `}
> >
{visibleFields === 0 {visibleFields === 0
@ -125,7 +127,7 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
</div> </div>
<div className="w-full bg-gray-200 rounded-full h-2.5"> <div className="w-full bg-gray-200 rounded-full h-2.5">
<div <div
className={`h-2.5 rounded-full transition-all duration-500 ${isDark ? "bg-gray-900" : "bg-primary"}`} className={`h-2.5 rounded-full transition-all duration-500 ${darkMode ? "bg-gray-900" : "bg-primary"}`}
style={{ width: `${progress.percent}%` }} style={{ width: `${progress.percent}%` }}
></div> ></div>
</div> </div>
@ -148,7 +150,7 @@ export default function AnalysisClient({ isDark }: { isDark: boolean }) {
type="submit" type="submit"
hidden={loading} hidden={loading}
disabled={!isValid} disabled={!isValid}
className={`w-full md:w-max ${isDark ? "bg-gray-900 hover:bg-card hover:text-black" : "bg-primary text-white"} px-6 py-3 mt-6 rounded-md transition-colors disabled:bg-gray-400`} className={`w-full md:w-max ${darkMode ? "bg-gray-900 hover:bg-card hover:text-black" : "bg-primary text-white"} px-6 py-3 mt-6 rounded-md transition-colors disabled:bg-gray-400`}
> >
<Sparkles className="h-4 w-4" /> <Sparkles className="h-4 w-4" />
{loading ? "Menganalisis..." : "Analisis Sekarang"} {loading ? "Menganalisis..." : "Analisis Sekarang"}