This package contains JSONs that power exile.watch.
This is ES module package only.
JSONs are generated based on the extracted YAML tokens.
The size of generated JSONs can be big (double digit kb)
It's advised to dynamically import them when needed in order to boost performance
npm i @exile-watch/encounter-data
// ListEncounterCategories.tsx
import { CategoryPageType } from "@exile-watch/encounter-data";
import { SimpleGrid } from "@exile-watch/writ-react";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { HomepageCard, SimpleCard } from "#components";
const ListEncounterCategories = () => {
const {
query: { directory, category },
} = useRouter();
const [data, setData] = useState<CategoryPageType | null>(null);
useEffect(() => {
import(
`@exile-watch/encounter-data/dist/extracted-data/${directory}/${category}.esm` as string
)
.then((d) => {
setData(d.default);
})
.catch(() => {
setData(null);
});
}, [category]);
return (
<SimpleGrid
cols={{ xxxl: 6, xxl: 5, xl: 4, lg: 3, md: 2, sm: 2, xs: 1 }}
mb="md"
>
{data?.map((data) => (
<HomepageCard key={data.path} {...data} />
))}
</SimpleGrid>
);
};
export default ListEncounterCategories;