[FEATURE] Adjusted order and styles (#11)

Co-authored-by: dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/nile/pulls/11

src/pages/delta/ProjectTile.jsx

@@ -1,10 +1,38 @@
 import { useState } from "react";
 import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import { SiGitea } from "react-icons/si";
 
+function ProjectLanguages(props) {
+  const { languages, smallMode } = props;
+  if (!languages || languages.length === 0) return;
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: smallMode ? "center" : "",
+        gap: smallMode ? ".25rem" : ".5rem",
+        marginTop: smallMode ? "5rem" : ".5rem",
+        width: "80%",
+        maxWidth: 512,
+        margin: smallMode ? "auto" : "",
+      }}
+    >
+      {languages.map((l, i) => (
+        <Chip
+          key={i}
+          label={l}
+          sx={{ borderRadius: "5px", margin: smallMode ? ".25rem" : "" }}
+        />
+      ))}
+    </Box>
+  );
+}
+
 export default function ProjectTile({
   image,
   title,
@@ -13,6 +41,7 @@ export default function ProjectTile({
   disableGutter,
   openPhoto,
   link,
+  languages,
 }) {
   const theme = useTheme();
   const smallMode = useMediaQuery(theme.breakpoints.down("md"));
@@ -113,6 +142,7 @@ export default function ProjectTile({
             {description}
           </Typography>
         </div>
+        <ProjectLanguages languages={languages} smallMode={smallMode} />
       </Box>
     </Box>
   );