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) => { const Calculation = ({ expression, result }: CalculationWidgetProps) => {
return ( 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="rounded-lg border border-light-200 dark:border-dark-200">
<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="p-4 space-y-4">
<div className="rounded-full p-1.5 bg-light-100 dark:bg-dark-100"> <div className="space-y-2">
<Calculator className="w-4 h-4 text-black/70 dark:text-white/70" /> <div className="flex items-center gap-2 text-black/60 dark:text-white/70">
</div> <Calculator className="w-4 h-4" />
<span className="text-sm font-medium text-black dark:text-white"> <span className="text-xs uppercase font-semibold tracking-wide">
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">
Expression Expression
</span> </span>
</div> </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"> <code className="text-sm text-black dark:text-white font-mono break-all">
{expression} {expression}
</code> </code>
</div> </div>
</div> </div>
<div> <div className="space-y-2">
<div className="flex items-center gap-1.5 mb-1.5"> <div className="flex items-center gap-2 text-black/60 dark:text-white/70">
<Equal className="w-3.5 h-3.5 text-black/50 dark:text-white/50" /> <Equal className="w-4 h-4" />
<span className="text-xs text-black/50 dark:text-white/50 font-medium"> <span className="text-xs uppercase font-semibold tracking-wide">
Result Result
</span> </span>
</div> </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"> <div className="text-4xl font-bold text-black dark:text-white font-mono tabular-nums">
{result.toLocaleString()} {result.toLocaleString()}
</div> </div>