remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-12-14 15:48:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(calculation-widget): enhance UI

Browse Source
This commit is contained in:
ItzCrazyKns
2025-12-05 21:30:41 +05:30
parent a548fd694a
commit 4fc810d976
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Widgets/Calculation.tsx
View File

@@ -9,38 +9,30 @@ type CalculationWidgetProps = {
const Calculation = ({ expression, result }: CalculationWidgetProps) => {
return (
<div className="rounded-lg bg-light-secondary dark:bg-dark-secondary border border-light-200 dark:border-dark-200 overflow-hidden shadow-sm">
<div className="flex items-center gap-2 p-3 bg-light-100/50 dark:bg-dark-100/50 border-b border-light-200 dark:border-dark-200">
<div className="rounded-full p-1.5 bg-light-100 dark:bg-dark-100">
<Calculator className="w-4 h-4 text-black/70 dark:text-white/70" />
</div>
<span className="text-sm font-medium text-black dark:text-white">
Calculation
</span>
</div>
<div className="p-4 space-y-3">
<div>
<div className="flex items-center gap-1.5 mb-1.5">
<span className="text-xs text-black/50 dark:text-white/50 font-medium">
<div className="rounded-lg border border-light-200 dark:border-dark-200">
<div className="p-4 space-y-4">
<div className="space-y-2">
<div className="flex items-center gap-2 text-black/60 dark:text-white/70">
<Calculator className="w-4 h-4" />
<span className="text-xs uppercase font-semibold tracking-wide">
Expression
</span>
</div>
<div className="bg-light-100 dark:bg-dark-100 rounded-md p-2.5 border border-light-200 dark:border-dark-200">
<div className="rounded-lg border border-light-200 dark:border-dark-200 bg-light-secondary dark:bg-dark-secondary p-3">
<code className="text-sm text-black dark:text-white font-mono break-all">
{expression}
</code>
</div>
</div>
<div>
<div className="flex items-center gap-1.5 mb-1.5">
<Equal className="w-3.5 h-3.5 text-black/50 dark:text-white/50" />
<span className="text-xs text-black/50 dark:text-white/50 font-medium">
<div className="space-y-2">
<div className="flex items-center gap-2 text-black/60 dark:text-white/70">
<Equal className="w-4 h-4" />
<span className="text-xs uppercase font-semibold tracking-wide">
Result
</span>
</div>
<div className="bg-gradient-to-br from-light-100 to-light-secondary dark:from-dark-100 dark:to-dark-secondary rounded-md p-4 border-2 border-light-200 dark:border-dark-200">
<div className="rounded-xl border border-light-200 dark:border-dark-200 bg-light-secondary dark:bg-dark-secondary p-5">
<div className="text-4xl font-bold text-black dark:text-white font-mono tabular-nums">
{result.toLocaleString()}
</div>