291 lines
17 KiB
TypeScript
291 lines
17 KiB
TypeScript
import React from "react";
|
|
import { useSettingsForm } from "./SettingsLayout";
|
|
import { FormField, FormItem, FormLabel, FormControl, FormDescription } from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
|
import { Users, Backpack, Sparkles, CreditCard, MessageSquare } from "lucide-react";
|
|
|
|
export function EconomySettings() {
|
|
const { form } = useSettingsForm();
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in slide-up duration-500">
|
|
<Accordion type="multiple" className="w-full space-y-4" defaultValue={["daily", "inventory"]}>
|
|
<AccordionItem value="daily" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
|
<AccordionTrigger className="hover:no-underline py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-500">
|
|
<Users className="w-4 h-4" />
|
|
</div>
|
|
<span className="font-bold">Daily Rewards</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-4 pb-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.daily.amount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Base Amount</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="text" className="bg-background/50" placeholder="100" />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">Reward (AU)</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.daily.streakBonus"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Streak Bonus</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="text" className="bg-background/50" placeholder="10" />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">Bonus/day</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.daily.weeklyBonus"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Weekly Bonus</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="text" className="bg-background/50" placeholder="50" />
|
|
</FormControl>
|
|
<FormDescription className="text-xs">7-day bonus</FormDescription>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.daily.cooldownMs"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Cooldown (ms)</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="inventory" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
|
<AccordionTrigger className="hover:no-underline py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-orange-500/10 flex items-center justify-center text-orange-500">
|
|
<Backpack className="w-4 h-4" />
|
|
</div>
|
|
<span className="font-bold">Inventory</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-4 pb-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="inventory.maxStackSize"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Max Stack Size</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="text" className="bg-background/50" />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="inventory.maxSlots"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Max Slots</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="leveling" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
|
<AccordionTrigger className="hover:no-underline py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500">
|
|
<Sparkles className="w-4 h-4" />
|
|
</div>
|
|
<span className="font-bold">Leveling & XP</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-4 pb-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="leveling.base"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Base XP</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="leveling.exponent"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Exponent</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="bg-muted/30 p-4 rounded-lg space-y-3">
|
|
<h4 className="text-xs font-bold text-muted-foreground uppercase tracking-wider flex items-center gap-2">
|
|
<MessageSquare className="w-3 h-3" /> Chat XP
|
|
</h4>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="leveling.chat.minXp"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-1">
|
|
<FormLabel className="text-xs">Min</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="leveling.chat.maxXp"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-1">
|
|
<FormLabel className="text-xs">Max</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="leveling.chat.cooldownMs"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-1">
|
|
<FormLabel className="text-xs">Cooldown</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" className="h-9 text-sm" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="transfers" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
|
<AccordionTrigger className="hover:no-underline py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-green-500/10 flex items-center justify-center text-green-500">
|
|
<CreditCard className="w-4 h-4" />
|
|
</div>
|
|
<span className="font-bold">Transfers</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-4 pb-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.transfers.allowSelfTransfer"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border border-border/50 bg-background/50 p-4">
|
|
<div className="space-y-0.5">
|
|
<FormLabel className="text-sm font-medium">Allow Self-Transfer</FormLabel>
|
|
<FormDescription className="text-xs">
|
|
Permit users to transfer currency to themselves.
|
|
</FormDescription>
|
|
</div>
|
|
<FormControl>
|
|
<Switch
|
|
checked={field.value}
|
|
onCheckedChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.transfers.minAmount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Minimum Transfer Amount</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="text" placeholder="1" className="bg-background/50" />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="exam" className="border border-border/40 rounded-xl bg-card/30 px-4 transition-all data-[state=open]:border-primary/20 data-[state=open]:bg-card/50">
|
|
<AccordionTrigger className="hover:no-underline py-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
|
|
<Sparkles className="w-4 h-4" />
|
|
</div>
|
|
<span className="font-bold">Exams</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="space-y-4 pb-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.exam.multMin"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Min Multiplier</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="economy.exam.multMax"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Max Multiplier</FormLabel>
|
|
<FormControl>
|
|
<Input {...field} type="number" step="0.1" className="bg-background/50" onChange={e => field.onChange(Number(e.target.value))} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|