Roadmap to becoming a developer in 2022
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.
|
|
|
|
---
|
|
|
|
|
import Icon from "./Icon.astro";
|
|
|
|
|
import Loader from "./Loader.astro";
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<div id='topic-overlay' class='hidden'>
|
|
|
|
|
<div class="fixed top-0 right-0 z-40 h-screen p-4 sm:p-6 overflow-y-auto bg-white w-full sm:max-w-[600px]" tabindex="-1" id='topic-body'>
|
|
|
|
|
<div id='topic-loader' class='hidden'>
|
|
|
|
|
<Loader />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id='topic-actions' class='hidden mb-2'>
|
|
|
|
|
<button id='mark-topic-done' class='bg-green-600 text-white p-1 px-2 text-sm rounded-md hover:bg-green-700 inline-flex items-center'>
|
|
|
|
|
<Icon icon="check" /> <span class='ml-2'>Mark as Done</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button id='mark-topic-pending' class='hidden bg-red-600 text-white p-1 px-2 text-sm rounded-md hover:bg-red-700 inline-flex items-center'>
|
|
|
|
|
<Icon icon="reset" /> <span class='ml-2'>Mark as Pending</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button type="button" id='close-topic' class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center">
|
|
|
|
|
<Icon icon="close" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id='topic-content' class='prose prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5 prose-h2:mb-3 prose-h2:mt-0'></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
