leumas-private-shared/src/Cards/PublicAppCard.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import {
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    Typography,
    Avatar,
    Tooltip,
  } from "@material-tailwind/react";
  import ProductDetails from "../../../Pages/ProductDetails/ProductDetails";
  export function PublicAppCard({app , setMode}) {

    // These are blocks not apps, meaning only thr owner can manipulate them

    const handleAppClickDetails = (e, app, type) => {
      console.log("We want to view an app's details:", app);
      setMode(<ProductDetails setMode={setMode} data={app} type={type} entityType={"Product"} />);
    };
    

    const handleMyBlockClickDetails = (e , block) => {
      e.preventDefault();
      console.log("We want to view an apps details \n here is what our onClick is giving us : \n " , block)
      setMode(()=>{<ProductDetails data={app} type={"Block"} />});
    };
  
    const handleMyBlockClickRunner = (e , block) => {
      e.preventDefault();
      console.log("We want to view an apps details \n here is what our onClick is giving us : \n " , block)
      // setMode(<AIView model={model} />);
    };




    console.log("Public app details " , app)

    return (
      <Card onClick={(e) => { handleAppClickDetails(e, app, "LeumasApp") }} className={` cursor-pointer max-w-[24rem] overflow-hidden flex flex-col justify-between border-2 ${app?.public ? "border-green-400" : "border-blue-400"}`}>
        <CardHeader
          floated={false}
          shadow={false}
          color="transparent"
          className="m-0 rounded-none"
        >
          <img
          className="w-full h-full"
            src={app?.coverPhoto ? app?.coverPhoto : "https://via.placeholder.com/150"}
            alt="ui/ux review check"
          />
        </CardHeader>
        <CardBody>
          <Typography variant="h4" color="blue-gray">
            {app?.name || app?.title}
          </Typography>
          <Typography variant="lead" color="gray" className="mt-3 font-normal">
            {app?.description ? app?.description : "No Info Available"}
          </Typography>
        </CardBody>
        <CardFooter className="flex items-center justify-between">
          <div className="flex items-center -space-x-3">
            <Tooltip content={app?.owner?.frontend_username}>
              <Avatar
                size="sm"
                variant="circular"
                alt={app?.owner?.frontend_username}
                src={app?.owner?.profilePicture}
                className=" shadow-xl hover:z-10"
              />
            </Tooltip>

          </div>
          <div className="flex flex-col items-end justify-end">
            <Typography className="font-normal">$ {app.price} / {app?.priceFrequency}</Typography>
            <Typography className="font-xs">{app?.public ? "Public" : "Private" }</Typography>
          </div>
          
        </CardFooter>
      </Card>
    );
  }