Back

Version 5

11/8/2024
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

function StarRating({ rating, onRate }) {
return (
<div>
{[1, 2, 3, 4, 5].map((star) => (
<span
key={star}
onClick={() => onRate(star)}
style={{ cursor: 'pointer', color: star <= rating ? 'gold' : 'gray' }}
>
</span>
))}
</div>
);
}

function DetailView({ item, type, onClose }) {
const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState('');
const [rating, setRating] = useState(0);

useEffect(() => {
fetchComments();
fetchRating();
}, []);

const fetchComments = async () => {
const response = await fetch(`/${type}/${item.id}/comments`);
if (response.ok) {
const data = await response.json();
setComments(data);
}