begin building feature request component

EthanBonsignori · Feb 19, 2024 · 72c6357 · 72c6357
1 parent ed2d7b2
commit 72c6357
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 11 deletions.
diff --git a/src/components/FeatureRequest.tsx b/src/components/FeatureRequest.tsx
@@ -1,3 +1,5 @@
+import { ArrowDropUp } from "@mui/icons-material";
+import { Box, Button, Chip, Paper, Typography } from "@mui/material";
 import { FC } from "react";
 import { FeatureRequestGetResponse } from "../api/generated";
 
@@ -7,10 +9,44 @@ interface FeatureRequestProps {
 
 const FeatureRequest: FC<FeatureRequestProps> = ({ featureRequest }) => {
   return (
-    <div>
-      <h3>{featureRequest.title}</h3>
-      <p>{featureRequest.content}</p>
-    </div>
+    <Paper
+      square={false}
+      elevation={3}
+      sx={{ p: 1, display: "flex", flexDirection: "row", alignItems: "center" }}
+    >
+      <Box sx={{ mr: 2, ml: 1 }}>
+        <Button
+          variant="outlined"
+          color="secondary"
+          sx={{
+            p: 0,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            border: "1px solid #888",
+            borderRadius: "10%",
+            width: "70px",
+            height: "70px",
+            color: "#888",
+            ":hover": {
+              borderColor: "#000",
+              color: "#000",
+              backgroundColor: "#f0f0f0",
+            },
+          }}
+        >
+          <ArrowDropUp fontSize="large" />
+          <Typography variant="h6">{featureRequest.votes}</Typography>
+        </Button>
+      </Box>
+      <Box>
+        <Typography variant="h6">{featureRequest.title}</Typography>
+        <Typography variant="subtitle1" sx={{ color: "#888" }}>
+          {featureRequest.content}
+        </Typography>
+        <Chip label={featureRequest.category} variant="outlined" />
+      </Box>
+    </Paper>
   );
 };
 

diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx
@@ -7,7 +7,11 @@ import FeatureRequest from "../components/FeatureRequest";
 import Layout from "../components/Layout";
 
 const Root: FC = () => {
-  const { isLoading, error, data } = useQuery({
+  const {
+    isLoading,
+    error,
+    data: featureRequests,
+  } = useQuery({
     queryKey: ["feature-requests"],
     queryFn: getFeatureRequests,
   });
@@ -23,20 +27,20 @@ const Root: FC = () => {
 
   if (error) return <Layout>Error: {error.message}</Layout>;
 
-  if (!data)
+  if (!featureRequests)
     return <Layout>No data yet, try creating a feature request</Layout>;
 
   return (
     <Layout>
-      <Grid container spacing={2}>
-        <Grid item xs={12} key={1}>
-          {data.map((featureRequest) => (
+      <Grid container spacing={1}>
+        {featureRequests.map((featureRequest) => (
+          <Grid item xs={12}>
             <FeatureRequest
               key={featureRequest.id}
               featureRequest={featureRequest}
             />
-          ))}
-        </Grid>
+          </Grid>
+        ))}
       </Grid>
     </Layout>
   );