packages/devtools-ui/src/components/feed.tsx
import React from "react";
import clsx from "clsx";
import type { Feed as FeedType } from "@refinedev/devtools-shared";
import { FeedItem } from "src/components/feed-item";
export const Feed = () => {
const [feed, setFeed] = React.useState<FeedType | null>(null);
const fetchFeed = React.useCallback(async () => {
try {
const response = await fetch("api/feed");
const { data } = (await response.json()) as {
data: FeedType | null;
};
setFeed(data);
} catch (error) {
//
}
}, []);
React.useEffect(() => {
fetchFeed();
}, [fetchFeed]);
return (
<div
className={clsx(
"re-flex-1",
"re-flex",
"re-flex-col",
"re-h-full",
"re-w-full",
"large:re-max-w-[380px]",
"re-justify-center",
"re-mx-auto",
)}
>
<div
className={clsx(
"re-text-sm",
"re-text-gray-0",
"re-font-semibold",
"re-leading-8",
"re-flex-shrink-0",
)}
>
Updates from the Refine team
</div>
<div className={clsx("re-flex-1", "re-overflow-auto")}>
<div className={clsx("re-flex", "re-flex-col", "re-gap-8")}>
<div className="re-h-px re-w-full re-flex-shrink-0" />
{feed?.map((item, index) => (
<FeedItem key={index} item={item} />
))}
<div className="re-h-px re-w-full re-flex-shrink-0" />
</div>
</div>
</div>
);
};