37 lines
901 B
TypeScript
37 lines
901 B
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { styled } from "styled-components";
|
|
import { Collections } from "../../../constants";
|
|
|
|
interface Props {
|
|
keyIds: string[];
|
|
}
|
|
|
|
const Container = styled.div`
|
|
display: flex;
|
|
place-items: center;
|
|
gap: 5px;
|
|
`;
|
|
|
|
export const AppearanceRowLabel = ({ keyIds }: Props): JSX.Element => {
|
|
const [keySlugs, setKeySlugs] = useState<string[]>([]);
|
|
useEffect(() => {
|
|
const fetchUrl = async () => {
|
|
const results = await Promise.all(
|
|
keyIds.map(async (keyId) => await (await fetch(`/api/${Collections.Keys}/${keyId}`)).json())
|
|
);
|
|
setKeySlugs(results.map((result) => result.name));
|
|
};
|
|
fetchUrl();
|
|
}, [keyIds]);
|
|
|
|
return (
|
|
<Container>
|
|
{keySlugs.map((keySlug) => (
|
|
<div id={keySlug} className="pill pill--style-white">
|
|
{keySlug}
|
|
</div>
|
|
))}
|
|
</Container>
|
|
);
|
|
};
|