function VideoCard({ videoId, title, channel, isReviewed }) { const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`; return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 shadow-sm w-[320px] overflow-hidden bg-white", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: thumbnailUrl, alt: `Thumbnail for ${title}`, className: "w-full h-[180px] object-cover", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-semibold truncate", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 text-sm mt-1", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, channel), /*#__PURE__*/ React.createElement("div", { className: "mt-3 flex items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${isReviewed ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, isReviewed ? "Reviewed" : "Pending Review")))); } function VideoCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoCard, { videoId: "dQw4w9WgXcQ", title: "Never Gonna Give You Up", channel: "Rick Astley", isReviewed: true, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(VideoCard, { videoId: "dQw4w9WgXcQ", title: "This is a very long video title that should be truncated nicely", channel: "Channel Name", isReviewed: false, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function ReviewForm({ onSubmit = ()=>{}, initialValues = {} }) { const [formData, setFormData] = useState({ notes: initialValues.notes || "", status: initialValues.status || "approved", reviewerName: initialValues.reviewerName || "" }); const handleSubmit = (e)=>{ e.preventDefault(); onSubmit(formData); }; const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-6 rounded-lg shadow-md max-w-lg mx-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "reviewerName", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Reviewer Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "reviewerName", name: "reviewerName", value: formData.reviewerName, onChange: handleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "notes", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Review Notes"), /*#__PURE__*/ React.createElement("textarea", { id: "notes", name: "notes", rows: 4, value: formData.notes, onChange: handleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "status", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Approval Status"), /*#__PURE__*/ React.createElement("select", { id: "status", name: "status", value: formData.status, onChange: handleChange, className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "approved", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Approved"), /*#__PURE__*/ React.createElement("option", { value: "rejected", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Rejected"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Submit Review"))); } function ReviewFormStory() { const handleSubmit = (data)=>{ console.log("Form submitted:", data); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReviewForm, { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this })); } function MainComponent() { const [videos] = useState([ { id: 1, videoId: "dQw4w9WgXcQ", title: "First Video", channel: "Channel One", isReviewed: false }, { id: 2, videoId: "dQw4w9WgXcQ", title: "Second Video", channel: "Channel Two", isReviewed: true }, { id: 3, videoId: "dQw4w9WgXcQ", title: "Third Video", channel: "Channel Three", isReviewed: false }, { id: 4, videoId: "dQw4w9WgXcQ", title: "Fourth Video", channel: "Channel Four", isReviewed: false } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-sm", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Video Reviews"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-semibold px-4 py-2 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Login"))), /*#__PURE__*/ React.createElement("main", { className: "max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, videos.map((video)=>/*#__PURE__*/ React.createElement("a", { key: video.id, href: `/review/${video.videoId}`, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(VideoCard, { ...video, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })))))); }