EphemeralFog/bokhary-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix toast component low z-index and some design issues

Browse Source
This commit is contained in:
EphemeralFog
2026-01-20 23:53:17 +03:30
parent 2f0bba567f
commit 6955cc2f01
2 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Toast.tsx
View File

@@ -1,27 +1,27 @@
import type { ReactNode } from "react";
type Props = {
children: ReactNode;
onClose: () => void;
children: ReactNode;
onClose: () => void;
};
export default function Toast({ children, onClose }: Props) {
return (
<div className="group relative w-full px-5 py-2 rounded-lg overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 cursor-pointer">
<div className="absolute inset-0 bg-orange-500/10 backdrop-blur-xl border border-orange-400/30 rounded-lg"></div>
<div className="absolute inset-0 bg-linear-to-br from-orange-400/20 via-orange-500/5 to-transparent rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="absolute inset-0 bg-linear-to-r from-transparent via-orange-300/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 rounded-lg"></div>
<div className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl bg-orange-500/40"></div>
<div className="absolute inset-px rounded-lg bg-linear-to-b from-orange-400/10 to-transparent"></div>
<span dir='rtl' className="relative flex items-center gap-2 text-white font-medium text-sm font-vazirmatn ml-4">
{children}
</span>
<button
onClick={onClose}
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white opacity-70 hover:opacity-100 transition-opacity duration-200"
>
×
</button>
</div>
);
}
return (
<div className="group relative w-full px-5 py-2 rounded-lg overflow-hidden transition-all duration-300 active:scale-99 cursor-pointer">
<div className="absolute inset-0 bg-orange-500/10 backdrop-blur-xl border border-orange-400/30 rounded-lg"></div>
{/*<div className="absolute inset-px rounded-lg bg-linear-to-b from-orange-400/10 to-transparent"></div>*/}
<span
dir="rtl"
className="relative flex items-center gap-2 text-white font-medium text-sm font-vazirmatn ml-4"
>
{children}
</span>
<button
onClick={onClose}
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white opacity-70 hover:opacity-100 transition-opacity duration-200"
>
×
</button>
</div>
);
}

56
src/index.tsx
View File

@@ -6,42 +6,42 @@ import Modal from "./components/Modal";
import BackgroundParticles from "./components/Particles";
import Bokhary from "./components/Bokhary";
import Toast from "./components/Toast";
import TimePassed from "./components/TimePassed"
import TimePassed from "./components/TimePassed";
import "@fontsource/vazirmatn";
import "./index.css";
function App() {
const [modalOpen, setModalOpen] = useState(false);
const [toast, showToast] = useState(true);
const [modalOpen, setModalOpen] = useState(false);
const [toast, showToast] = useState(true);
return (
<StrictMode>
<BackgroundParticles />
return (
<StrictMode>
<div className="relative min-h-dvh">
<div className="fixed m-2 top-0 left-0 right-0 z-20">
{toast && (
<Toast onClose={() => showToast(false)}>
<TimePassed></TimePassed>
</Toast>
)}
</div>
<div className="relative z-10">
<Bokhary />
</div>
<BackgroundParticles />
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-20">
<FloatingButton
text="اتصال"
onClick={() => setModalOpen(true)}
/>
</div>
</div>
<div className="relative min-h-dvh">
<div className="fixed m-2 top-0 left-0 right-0">
{toast && (
<Toast onClose={() => showToast(false)}>
<TimePassed></TimePassed>
</Toast>
)}
</div>
<div className="relative z-10">
<Bokhary />
</div>
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-20">
<FloatingButton text="اتصال" onClick={() => setModalOpen(true)} />
</div>
</div>
<Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
</StrictMode>
);
<Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
</StrictMode>
);
}
createRoot(document.getElementById("root")!).render(<App />);
createRoot(document.getElementById("root")!).render(<App />);