computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.1 KiB
41 lines
1.1 KiB
--- |
|
import Icon from '../AstroIcon.astro'; |
|
|
|
export interface Props { |
|
id: string; |
|
title: string; |
|
subtitle: string; |
|
} |
|
|
|
const { id, title, subtitle } = Astro.props; |
|
--- |
|
|
|
<script src='./popup.js'></script> |
|
|
|
<div |
|
id={id} |
|
tabindex='-1' |
|
class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full items-center justify-center popup' |
|
> |
|
<div class='relative p-4 w-full max-w-md h-full md:h-auto'> |
|
<div class='relative bg-white rounded-lg shadow popup-body'> |
|
<button |
|
type='button' |
|
class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center popup-close' |
|
> |
|
<Icon icon='close' /> |
|
<span class='sr-only'>Close popup</span> |
|
</button> |
|
<div class='p-5'> |
|
<h3 class='text-2xl mb-0.5 font-medium'> |
|
{title} |
|
</h3> |
|
<p class='mb-4 text-sm font-normal text-gray-800'> |
|
{subtitle} |
|
</p> |
|
|
|
<slot /> |
|
</div> |
|
</div> |
|
</div> |
|
</div>
|
|
|