New Frontend Preps

frontend/src/widgets/cards/index.js

@@ -0,0 +1,3 @@
+export * from "@/widgets/cards/statistics-card";
+export * from "@/widgets/cards/profile-info-card";
+export * from "@/widgets/cards/message-card";

frontend/src/widgets/cards/message-card.jsx

@@ -0,0 +1,45 @@
+import PropTypes from "prop-types";
+import { Avatar, Typography } from "@material-tailwind/react";
+
+export function MessageCard({ img, name, message, action }) {
+  return (
+    <div className="flex items-center justify-between gap-4">
+      <div className="flex items-center gap-4">
+        <Avatar
+          src={img}
+          alt={name}
+          variant="rounded"
+          className="shadow-lg shadow-blue-gray-500/25"
+        />
+        <div>
+          <Typography
+            variant="small"
+            color="blue-gray"
+            className="mb-1 font-semibold"
+          >
+            {name}
+          </Typography>
+          <Typography className="text-xs font-normal text-blue-gray-400">
+            {message}
+          </Typography>
+        </div>
+      </div>
+      {action}
+    </div>
+  );
+}
+
+MessageCard.defaultProps = {
+  action: null,
+};
+
+MessageCard.propTypes = {
+  img: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  message: PropTypes.node.isRequired,
+  action: PropTypes.node,
+};
+
+MessageCard.displayName = "/src/widgets/cards/message-card.jsx";
+
+export default MessageCard;

frontend/src/widgets/cards/profile-info-card.jsx

@@ -0,0 +1,79 @@
+import PropTypes from "prop-types";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Typography,
+} from "@material-tailwind/react";
+
+export function ProfileInfoCard({ title, description, details, action }) {
+  return (
+    <Card color="transparent" shadow={false}>
+      <CardHeader
+        color="transparent"
+        shadow={false}
+        floated={false}
+        className="mx-0 mt-0 mb-4 flex items-center justify-between gap-4"
+      >
+        <Typography variant="h6" color="blue-gray">
+          {title}
+        </Typography>
+        {action}
+      </CardHeader>
+      <CardBody className="p-0">
+        {description && (
+          <Typography
+            variant="small"
+            className="font-normal text-blue-gray-500"
+          >
+            {description}
+          </Typography>
+        )}
+        {description && details ? (
+          <hr className="my-8 border-blue-gray-50" />
+        ) : null}
+        {details && (
+          <ul className="flex flex-col gap-4 p-0">
+            {Object.keys(details).map((el, key) => (
+              <li key={key} className="flex items-center gap-4">
+                <Typography
+                  variant="small"
+                  color="blue-gray"
+                  className="font-semibold capitalize"
+                >
+                  {el}:
+                </Typography>
+                {typeof details[el] === "string" ? (
+                  <Typography
+                    variant="small"
+                    className="font-normal text-blue-gray-500"
+                  >
+                    {details[el]}
+                  </Typography>
+                ) : (
+                  details[el]
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardBody>
+    </Card>
+  );
+}
+
+ProfileInfoCard.defaultProps = {
+  action: null,
+  description: null,
+  details: {},
+};
+
+ProfileInfoCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.node,
+  details: PropTypes.object,
+};
+
+ProfileInfoCard.displayName = "/src/widgets/cards/profile-info-card.jsx";
+
+export default ProfileInfoCard;

frontend/src/widgets/cards/statistics-card.jsx

@@ -0,0 +1,75 @@
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Typography,
+} from "@material-tailwind/react";
+import PropTypes from "prop-types";
+
+export function StatisticsCard({ color, icon, title, value, footer }) {
+  return (
+    <Card className="border border-blue-gray-100 shadow-sm">
+      <CardHeader
+        variant="gradient"
+        color={color}
+        floated={false}
+        shadow={false}
+        className="absolute grid h-12 w-12 place-items-center"
+      >
+        {icon}
+      </CardHeader>
+      <CardBody className="p-4 text-right">
+        <Typography variant="small" className="font-normal text-blue-gray-600">
+          {title}
+        </Typography>
+        <Typography variant="h4" color="blue-gray">
+          {value}
+        </Typography>
+      </CardBody>
+      {footer && (
+        <CardFooter className="border-t border-blue-gray-50 p-4">
+          {footer}
+        </CardFooter>
+      )}
+    </Card>
+  );
+}
+
+StatisticsCard.defaultProps = {
+  color: "blue",
+  footer: null,
+};
+
+StatisticsCard.propTypes = {
+  color: PropTypes.oneOf([
+    "white",
+    "blue-gray",
+    "gray",
+    "brown",
+    "deep-orange",
+    "orange",
+    "amber",
+    "yellow",
+    "lime",
+    "light-green",
+    "green",
+    "teal",
+    "cyan",
+    "light-blue",
+    "blue",
+    "indigo",
+    "deep-purple",
+    "purple",
+    "pink",
+    "red",
+  ]),
+  icon: PropTypes.node.isRequired,
+  title: PropTypes.node.isRequired,
+  value: PropTypes.node.isRequired,
+  footer: PropTypes.node,
+};
+
+StatisticsCard.displayName = "/src/widgets/cards/statistics-card.jsx";
+
+export default StatisticsCard;