soheilkhaledabadi/persian-ping-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : update btn and modal for better ui

Browse Source
This commit is contained in:
alij
2024-06-09 22:48:22 -07:00
parent 0c28e72536
commit 114440f48c
6 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/button/index.tsx
View File

@@ -3,9 +3,9 @@ import { ButtonProps } from "../../types/props";
function Button({ children, extra, active,...attrs }: ButtonProps) {
return (
<button
className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white ${
className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white shadow-lg hover:!shadow-gray-600 ${
active
? "!bg-secondTheme shadow-secondTheme hover:shadow-gray-600 shadow-lg"
? "!bg-secondTheme shadow-secondTheme shadow-lg hover:!shadow-gray-600"
: ""
} ${extra}`}
type="button"

46
src/components/progressSpace/index.tsx
View File

@@ -3,30 +3,40 @@ import { ProgressSpaceProps } from "../../types/props";
const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
let startSpacePercentage;
let remaining;
if (typeof endSpace === "number") {
startSpacePercentage = (startSpace / endSpace) * 100;
remaining = endSpace - startSpace;
}
return (
<div className="relative w-full h-full p-3 bg-gray-800 rounded-md flex gap-2 justify-center items-center">
<div className="flex gap-1">
<span>حجم </span>
<span>{startSpace}</span>
<span>GB</span>
<>
<div className="relative w-full h-full p-3 bg-gray-800 rounded-md flex gap-2 justify-center items-center">
<div className="flex gap-1">
<span>حجم </span>
<span>GB</span>
<span>{startSpace}</span>
</div>
<div className="w-full rounded-full h-2 md:h-2.5 bg-gray-700">
<motion.div
className="bg-secondTheme h-2 md:h-2.5 rounded-full"
animate={{ width: `${startSpacePercentage}%` }}
initial={{ width: 0 }}
transition={{ type: "tween", duration: 1 }}
style={{ transformOrigin: "right" }}
></motion.div>
</div>
<div className="flex flex-row-reverse gap-1">
<span> {endSpace}</span>
<span>GB</span>
</div>
</div>
<div className="w-full rounded-full h-2.5 bg-gray-700">
<motion.div
className="bg-blue-600 h-2.5 rounded-full"
animate={{ width: `${startSpacePercentage}%` }}
initial={{ width: 0 }}
transition={{ type: "tween", duration: 1 }}
style={{ transformOrigin: "right" }}
></motion.div>
<div className="w-full h-full mt-1 p-2 text-center text-xs md:text-base">
<p>
{" "}
حجم باقیمانده کانفیگ شما از {endSpace} گیگ <span className="mx-1 border-b border-secondTheme">{remaining}</span>گیگ میباشد{" "}
</p>
</div>
<div className="flex flex-row-reverse gap-1">
<span> {endSpace}</span>
<span>GB</span>
</div>
</div>
</>
);
};