info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-19 23:53:24 +02:00
Code Issues Releases Wiki Activity

Update announcement popup

Browse Source
This commit is contained in:
Kamran Ahmed
2024-08-19 12:06:03 +01:00
parent edfcc84ece
commit 4d1b9ab093
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/FeatureAnnouncement.tsx
View File

@@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { Modal } from './Modal.tsx'; import { Modal } from './Modal.tsx';
import { PartyPopper } from 'lucide-react'; import { PartyPopper } from 'lucide-react';
import { isMobileScreen } from '../lib/is-mobile.ts';
type FeatureAnnouncementProps = {}; type FeatureAnnouncementProps = {};
@@ -13,7 +14,7 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
bodyClassName={'h-auto overflow-hidden'} bodyClassName={'h-auto overflow-hidden'}
wrapperClassName={'md:max-w-3xl lg:max-w-4xl xl:max-w-5xl'} wrapperClassName={'md:max-w-3xl lg:max-w-4xl xl:max-w-5xl'}
> >
<div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 md:py-3 text-left text-sm lg:text-base"> <div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 text-left text-sm md:py-3 lg:text-base">
<span <span
className="relative -top-px mr-1.5 rounded bg-blue-300 px-1.5 py-0.5 text-xs font-semibold uppercase text-gray-800" className="relative -top-px mr-1.5 rounded bg-blue-300 px-1.5 py-0.5 text-xs font-semibold uppercase text-gray-800"
style={{ lineHeight: '1.5' }} style={{ lineHeight: '1.5' }}
@@ -31,9 +32,7 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
{' '} {' '}
and are coming soon on the others{' '} and are coming soon on the others{' '}
</span> </span>
<PartyPopper <PartyPopper className="relative -top-[3px] ml-2 inline-block h-5 w-5 text-blue-500 md:ml-1 md:h-6 md:w-6" />
className="relative -top-[3px] ml-2 md:ml-1 inline-block w-5 h-5 md:w-6 md:h-6 text-blue-500"
/>
</div> </div>
<div <div
className="iframe-container" className="iframe-container"
@@ -68,7 +67,17 @@ export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
{isPlaying && videoModal} {isPlaying && videoModal}
<button <button
className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200" className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200"
onClick={() => setIsPlaying(true)} onClick={() => {
if (isMobileScreen()) {
window.open(
'https://www.youtube.com/watch?v=9lS3slfJ0x0',
'_blank',
);
return;
}
setIsPlaying(true);
}}
> >
<span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white"> <span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white">
New New