47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { getUserData } from "../../functions/getUserData";
|
|
import { ALPHA_ORG } from "../../pages/Dashboard";
|
|
import { DeleteIcon } from "../icons/ContextMenuIcons";
|
|
import RenameInput from "../ui/inputs/RenameInput";
|
|
|
|
export const TutorialCard: React.FC<{
|
|
tutorial: Tutorial;
|
|
onClick: (tutorial: Tutorial) => void;
|
|
}> = ({ tutorial, onClick }) => {
|
|
const { organization } = getUserData();
|
|
return (
|
|
<div className="tutorial-card-container" onClick={() => onClick(tutorial)}>
|
|
<div
|
|
className="preview-container"
|
|
style={{
|
|
backgroundImage: tutorial.thumbnail
|
|
? `url(${tutorial.thumbnail})`
|
|
: "linear-gradient(135deg, #ddd, #bbb)",
|
|
}}
|
|
></div>
|
|
<div
|
|
className="tutorial-details"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<div className="context">
|
|
<div className="tutorial-name">
|
|
<RenameInput
|
|
value={tutorial.projectName}
|
|
canEdit={organization === ALPHA_ORG}
|
|
/>
|
|
</div>
|
|
<div className="updated-date">
|
|
{new Date(tutorial.createdAt).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
{organization === ALPHA_ORG && (
|
|
<div className="delete-option">
|
|
<DeleteIcon />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|