anatolykopyl
6176c1c15a
All checks were successful
continuous-integration/drone/push Build is passing
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { For } from 'solid-js';
|
|
import { createViewportObserver } from '@solid-primitives/intersection-observer';
|
|
|
|
import { useStore } from '../../store/index';
|
|
import type { Store } from '../../store/index';
|
|
import { scrollHereWhenSelected } from "../../utlis/scroll";
|
|
import styles from './Projects.module.css';
|
|
import projects from './projectList';
|
|
import Project from './Project';
|
|
import type { Project as ProjectType } from './projectList';
|
|
|
|
export default () => {
|
|
const [state, setters] = useStore() as Store;
|
|
const [observer] = createViewportObserver({threshold: 0.1});
|
|
const chapterName = 'projects'
|
|
|
|
return (
|
|
<div
|
|
use:observer={(event) => {
|
|
if (event.isIntersecting) {
|
|
if (!state.scrolling()) {
|
|
setters.setVisibleChapter(chapterName);
|
|
} else if (state.visibleChapter() === chapterName) {
|
|
setters.setScrolling(false)
|
|
}
|
|
}
|
|
}}
|
|
ref={(element) => scrollHereWhenSelected(element, [state, setters], chapterName)}
|
|
class={styles.Projects}
|
|
>
|
|
<For each={projects}>{(project: ProjectType) =>
|
|
<Project
|
|
project={project}
|
|
/>
|
|
}</For>
|
|
|
|
</div>
|
|
)
|
|
};
|