feat(homebrew): Added description to homebrew

scottbenton · May 14, 2024 · e4a26b6 · e4a26b6
1 parent b9cae81
commit e4a26b6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/src/pages/Homebrew/HomebrewEditorPage/AboutSection/AboutSection.tsx b/src/pages/Homebrew/HomebrewEditorPage/AboutSection/AboutSection.tsx
@@ -132,12 +132,15 @@ export function AboutSection(props: AboutSectionProps) {
             />
           </Grid>
         )}
-        <Grid item xs={12}>
-          <Description
-            expansionId={id}
-            description={details.description ?? ""}
-          />
-        </Grid>
+        {(!!details.description || isEditor) && (
+          <Grid item xs={12}>
+            <Description
+              expansionId={id}
+              description={details.description ?? ""}
+              isEditor={isEditor}
+            />
+          </Grid>
+        )}
         {details.type === PackageTypes.Expansion && (
           <Grid item xs={12}>
             <Typography variant="overline">Expansion For</Typography>

diff --git a/src/pages/Homebrew/HomebrewEditorPage/AboutSection/Description.tsx b/src/pages/Homebrew/HomebrewEditorPage/AboutSection/Description.tsx
@@ -1,15 +1,17 @@
 import { Box } from "@mui/material";
+import { MarkdownRenderer } from "components/shared/MarkdownRenderer";
 import { MarkdownEditor } from "components/shared/RichTextEditor/MarkdownEditor";
 import { useState } from "react";
 import { useStore } from "stores/store";
 
 export interface DescriptionProps {
   expansionId: string;
   description?: string;
+  isEditor?: boolean;
 }
 
 export function Description(props: DescriptionProps) {
-  const { expansionId, description } = props;
+  const { expansionId, description, isEditor } = props;
   const updateDetails = useStore((store) => store.homebrew.updateExpansion);
 
   const [localDescription, setLocalDescription] = useState(description ?? "");
@@ -20,12 +22,16 @@ export function Description(props: DescriptionProps) {
 
   return (
     <Box maxWidth={(theme) => theme.breakpoints.values.md}>
-      <MarkdownEditor
-        label={"Description"}
-        content={localDescription ?? ""}
-        onChange={(value) => setLocalDescription(value)}
-        onBlur={handleSave}
-      />
+      {isEditor ? (
+        <MarkdownEditor
+          label={"Description"}
+          content={localDescription ?? ""}
+          onChange={(value) => setLocalDescription(value)}
+          onBlur={handleSave}
+        />
+      ) : (
+        <MarkdownRenderer markdown={description ?? ""} />
+      )}
     </Box>
   );
 }