Files
developer-roadmap/src/components/DownloadRoadmapButton.tsx
T
Kamran Ahmed 1087e1a935 feat: redesign roadmap page header and add upcoming projects functionality (#6347)
* Redesign the header

* Responsiveness of the roadmap header

* Fix spacing

* Redesign roadmap header

* Add projects badge

* Update badge

* Add screen for projects

* UI flicker fix

* Add question for system design

* Code formatting
2024-08-03 01:34:59 +01:00

41 lines
1013 B
TypeScript

import { Download } from 'lucide-react';
import { isLoggedIn } from '../lib/jwt.ts';
import { useEffect, useState } from 'react';
import { showLoginPopup } from '../lib/popup.ts';
type DownloadRoadmapButtonProps = {
roadmapId: string;
};
export function DownloadRoadmapButton(props: DownloadRoadmapButtonProps) {
const { roadmapId } = props;
const [url, setUrl] = useState<string>('#');
useEffect(() => {
if (isLoggedIn()) {
setUrl(`/pdfs/roadmaps/${roadmapId}.pdf`);
}
}, []);
return (
<a
className="inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
aria-label="Download Roadmap"
target="_blank"
href={url}
onClick={(e) => {
if (isLoggedIn()) {
return;
}
e.preventDefault();
showLoginPopup();
}}
>
<Download className="h-4 w-4" />
<span className="ml-2 hidden sm:inline">Download</span>
</a>
);
}