mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-30 12:40:03 +02:00
Add topic search interactivity
This commit is contained in:
@@ -2,35 +2,41 @@
|
||||
import Icon from '../Icon.astro';
|
||||
|
||||
export interface Props {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
}
|
||||
|
||||
const { id, title, subtitle } = Astro.props;
|
||||
---
|
||||
|
||||
<script src="./popup.js"></script>
|
||||
<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 flex items-center justify-center modal">
|
||||
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
|
||||
<div class="relative bg-white rounded-lg shadow modal-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" onclick='this.closest(".modal").classList.add("hidden")'>
|
||||
<Icon icon="close" />
|
||||
<span class="sr-only">Close modal</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
|
||||
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 flex items-center justify-center modal'
|
||||
>
|
||||
<div class='relative p-4 w-full max-w-md h-full md:h-auto'>
|
||||
<div class='relative bg-white rounded-lg shadow modal-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'
|
||||
onclick='this.closest(".modal").classList.add("hidden")'
|
||||
>
|
||||
<Icon icon='close' />
|
||||
<span class='sr-only'>Close modal</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>
|
||||
|
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Icon from "./Icon.astro";
|
||||
import ResourcesAlert from "./ResourcesAlert.astro";
|
||||
import TopicSearch from "./TopicSearch.astro";
|
||||
import TopicSearch from "./TopicSearch/TopicSearch.astro";
|
||||
import YouTubeAlert from "./YouTubeAlert.astro";
|
||||
|
||||
export interface Props {
|
||||
|
@@ -1,7 +1,9 @@
|
||||
---
|
||||
import Icon from "./Icon.astro";
|
||||
import Icon from "../Icon.astro";
|
||||
---
|
||||
|
||||
<script src="./topics.js" />
|
||||
|
||||
<div class="sm:-mb-[68px] mt-5 sm:mt-6 relative">
|
||||
<input
|
||||
autofocus
|
31
src/components/TopicSearch/topics.js
Normal file
31
src/components/TopicSearch/topics.js
Normal file
@@ -0,0 +1,31 @@
|
||||
class Topics {
|
||||
constructor() {
|
||||
this.onDOMLoaded = this.onDOMLoaded.bind(this);
|
||||
this.init = this.init.bind(this);
|
||||
this.filterTopicNodes = this.filterTopicNodes.bind(this);
|
||||
}
|
||||
|
||||
filterTopicNodes(e) {
|
||||
const value = e.target.value.trim().toLowerCase();
|
||||
if (!value) {
|
||||
document.querySelectorAll(`[data-topic]`).forEach((item) => item.classList.remove('hidden'));
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll(`[data-topic]`).forEach((item) => item.classList.add('hidden'));
|
||||
|
||||
document.querySelectorAll(`[data-topic*="${value}"]`).forEach((item) => item.classList.remove('hidden'));
|
||||
}
|
||||
|
||||
onDOMLoaded() {
|
||||
document.getElementById('search-topic-input').addEventListener('keyup', this.filterTopicNodes);
|
||||
}
|
||||
|
||||
init() {
|
||||
window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
|
||||
}
|
||||
}
|
||||
|
||||
const topicRef = new Topics();
|
||||
topicRef.init();
|
||||
|
Reference in New Issue
Block a user