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"; import type { ReactNode } from "react";
type Props = { type Props = {
children: ReactNode; children: ReactNode;
onClose: () => void; onClose: () => void;
}; };
export default function Toast({ children, onClose }: Props) { export default function Toast({ children, onClose }: Props) {
return ( 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="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-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-px rounded-lg bg-linear-to-b from-orange-400/10 to-transparent"></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> <span
<div className="absolute inset-px rounded-lg bg-linear-to-b from-orange-400/10 to-transparent"></div> dir="rtl"
className="relative flex items-center gap-2 text-white font-medium text-sm font-vazirmatn ml-4"
<span dir='rtl' className="relative flex items-center gap-2 text-white font-medium text-sm font-vazirmatn ml-4"> >
{children} {children}
</span> </span>
<button <button
onClick={onClose} 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" className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white opacity-70 hover:opacity-100 transition-opacity duration-200"
> >
× ×
</button> </button>
</div> </div>
); );
} }

56
src/index.tsx
View File

@@ -6,42 +6,42 @@ import Modal from "./components/Modal";
import BackgroundParticles from "./components/Particles"; import BackgroundParticles from "./components/Particles";
import Bokhary from "./components/Bokhary"; import Bokhary from "./components/Bokhary";
import Toast from "./components/Toast"; import Toast from "./components/Toast";
import TimePassed from "./components/TimePassed" import TimePassed from "./components/TimePassed";
import "@fontsource/vazirmatn"; import "@fontsource/vazirmatn";
import "./index.css"; import "./index.css";
function App() { function App() {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const [toast, showToast] = useState(true); const [toast, showToast] = useState(true);
return (
<StrictMode>
<BackgroundParticles />
return ( <div className="relative min-h-dvh">
<StrictMode> <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"> <Modal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
<div className="fixed m-2 top-0 left-0 right-0"> </StrictMode>
{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>
);
} }
createRoot(document.getElementById("root")!).render(<App />); createRoot(document.getElementById("root")!).render(<App />);