Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tca 35/register modal #25

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Tca 35/register modal #25

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
752e3b5
feat: add register modal
CodeLeom Apr 30, 2024
b956e02
feat: add event to calendar modal
CodeLeom Apr 30, 2024
3a685e3
feat: add share event modal
CodeLeom Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 157 additions & 0 deletions src/pages/testModals/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
---

---

<!-- register modal -->
<div tabindex="-1" class="justify-center items-center m-10">
<div class="relative p-4 h-[234px] w-[502px]">
<div class="relative bg-white rounded-lg shadow dark:bg-white">
<button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-200 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
<svg class="w-3 h-3" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 md:p-5 text-center">
<div class="flex items-center">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="46" height="46" rx="23" fill="#F8FAFC"/>
<path d="M31 17L20 28L15 23" stroke="#4B5565" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="font-semibold text-xl ml-4">Register</span>
</div>
<p class="mb-4 text-base font-normal text-gray-600 text-left">
Are you sure you want to register for this event? You'll be redirected to the organizers registration page.
</p>
<div class="w-[438px] flex justify-between">
<button data-modal-hide="popup-modal" type="button" class="w-full text-black border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:border-gray-600 dark:text-black">
Cancel
</button>
<button data-modal-hide="popup-modal" type="button" class="w-full py-2.5 px-5 text-sm font-medium text-white focus:outline-none bg-black rounded-lg border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
Proceed
</button>
</div>

</div>
</div>
</div>
</div>



<!-- add to calendar modal -->

<div tabindex="-1" class="justify-center items-center m-10">
<div class="relative p-4 h-[234px] w-[502px]">
<div class="relative bg-white rounded-lg shadow dark:bg-white">
<button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-200 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
<svg class="w-3 h-3" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 md:p-5 text-center">
<div class="flex items-center">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="46" height="46" rx="23" fill="#F8FAFC"/>
<path d="M17 25V31C17 32.1046 17.8954 33 19 33H30C31.1046 33 32 32.1046 32 31V19C32 17.8954 31.1046 17 30 17H25" stroke="#4B5565" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 24L32 24" stroke="#4B5565" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27 15V17" stroke="#4B5565" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 13V21M13 17H21" stroke="#4B5565" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="font-semibold text-xl ml-4">Add event to Calendar</span>
</div>
<p class="mb-4 text-base font-normal text-gray-600 text-left">
Are you sure you want to perform this action?
</p>
<div class="w-[438px] flex justify-between">
<button data-modal-hide="popup-modal" type="button" class="w-full text-black border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:border-gray-600 dark:text-black">
Cancel
</button>
<button data-modal-hide="popup-modal" type="button" class="w-full py-2.5 px-5 text-sm font-medium text-white focus:outline-none bg-black rounded-lg border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
Proceed
</button>
</div>

</div>
</div>
</div>
</div>


<!-- share event modal -->
<div tabindex="-1" class="justify-center items-center m-20">
<div class="relative p-8 h-[234px] w-[502px]">
<div class="relative bg-white rounded-lg shadow dark:bg-white">
<button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-200 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="popup-modal">
<svg class="w-3 h-3" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-4 md:p-5 text-center">
<div class="flex items-center mb-8">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="46" height="46" rx="23" fill="#FFFAEB"/>
<path d="M29 33C30.6569 33 32 31.6569 32 30C32 28.3431 30.6569 27 29 27C27.3431 27 26 28.3431 26 30C26 31.6569 27.3431 33 29 33Z" stroke="#FEC84B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 26C18.6569 26 20 24.6569 20 23C20 21.3431 18.6569 20 17 20C15.3431 20 14 21.3431 14 23C14 24.6569 15.3431 26 17 26Z" stroke="#FEC84B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.5898 24.5098L26.4198 28.4898" stroke="#FEC84B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M29 19C30.6569 19 32 17.6569 32 16C32 14.3431 30.6569 13 29 13C27.3431 13 26 14.3431 26 16C26 17.6569 27.3431 19 29 19Z" stroke="#FEC84B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.4098 17.5098L19.5898 21.4898" stroke="#FEC84B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="font-semibold text-xl ml-4">Share Event</span>
</div>
<!-- copy button -->
<div class="h-10 border border-gray-200 mb-4 rounded-sm flex">
<!-- Left side div containing the URL text -->
<div class="flex-1 flex items-center px-2 overflow-hidden">
<span class="text-sm font-normal text-gray-400">https://techconfafrica.com/event/?/sudvettec</span>
</div>

<!-- Right side div containing an icon and text -->
<div class="flex items-center px-2 border-l-[1px]">
<span class="text-base font-semibold text-gray-700 mr-2">Copy</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2434_15168)">
<path d="M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z" stroke="#666666" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.33398 9.99967H2.66732C2.3137 9.99967 1.97456 9.8592 1.72451 9.60915C1.47446 9.3591 1.33398 9.01996 1.33398 8.66634V2.66634C1.33398 2.31272 1.47446 1.97358 1.72451 1.72353C1.97456 1.47348 2.3137 1.33301 2.66732 1.33301H8.66732C9.02094 1.33301 9.36008 1.47348 9.61013 1.72353C9.86018 1.97358 10.0007 2.31272 10.0007 2.66634V3.33301" stroke="#666666" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_2434_15168">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>


</div>
</div>

<p class="mb-4 text-base font-normal text-gray-600 text-left">
Share this event to your friends colleagues and community member
</p>
<div class="flex items-center text-center my-8">
<div class="flex-grow h-px bg-gray-300 ml-2.5"></div>
<span class="flex-shrink-0 px-2.5">or</span>
<div class="flex-grow h-px bg-gray-300 ml-2.5"></div>
</div>

<div class="flex justify-center items-center">
<button data-modal-hide="popup-modal" type="button" class="flex items-center justify-center w-[253px] py-2.5 px-5 text-sm font-medium text-white focus:outline-none bg-black rounded-lg border border-gray-200 hover:bg-gray-100 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2">
<g clip-path="url(#clip0_2434_17488)">
<path d="M6.7918 18.1246C14.3371 18.1246 18.4652 11.8719 18.4652 6.45118C18.4652 6.2754 18.4613 6.09572 18.4535 5.91993C19.2566 5.33918 19.9496 4.61985 20.5 3.79572C19.7521 4.12847 18.958 4.34579 18.1449 4.44025C19.0011 3.92706 19.6421 3.12086 19.9492 2.17111C19.1438 2.64843 18.263 2.98514 17.3445 3.16681C16.7257 2.50927 15.9075 2.0739 15.0164 1.92801C14.1253 1.78212 13.211 1.93384 12.4148 2.35971C11.6186 2.78559 10.9848 3.46189 10.6115 4.28406C10.2382 5.10623 10.1462 6.02848 10.3496 6.90822C8.71874 6.82638 7.12328 6.40272 5.66665 5.66472C4.21002 4.92671 2.92474 3.89083 1.89414 2.62423C1.37033 3.52734 1.21005 4.596 1.44586 5.61304C1.68167 6.63008 2.29589 7.51917 3.16367 8.09962C2.51219 8.07894 1.87498 7.90353 1.30469 7.5879V7.63868C1.3041 8.58642 1.63175 9.50512 2.23192 10.2386C2.8321 10.9721 3.66777 11.4751 4.59687 11.6621C3.99338 11.8272 3.35998 11.8513 2.7457 11.7324C3.00788 12.5475 3.51798 13.2604 4.20481 13.7716C4.89164 14.2828 5.72093 14.5668 6.57695 14.584C5.12369 15.7256 3.32848 16.3447 1.48047 16.3418C1.15274 16.3413 0.825332 16.3212 0.5 16.2817C2.37738 17.4861 4.56128 18.1258 6.7918 18.1246Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_2434_17488">
<rect width="20" height="20" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Tweet about this event
</button>
</div>
</div>
</div>
</div>
</div>