Factor ProjectName to separate file

coder · bryphe-coder · Jan 19, 2022 · Jan 19, 2022 · Jan 19, 2022 · Jan 19, 2022
commit 496b42ef3a0c38efa80971e2a9a707d5adef8423
diff --git a/site/components/Project/ProjectIcon.tsx b/site/components/Project/ProjectIcon.tsx
@@ -1,5 +1,6 @@
 import React from "react"
-import { Box, makeStyles, SvgIcon, Typography } from "@material-ui/core"
+import { Box, makeStyles } from "@material-ui/core"
+import { ProjectName } from "./ProjectName"
 
 export interface ProjectIconProps {
   title: string
@@ -19,7 +20,9 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 }))
-
+/**
+ * <Circle /> is just a placeholder icon for projects that don't have one.
+ */
 const Circle: React.FC = () => {
   return (
     <Box
@@ -33,39 +36,6 @@ const Circle: React.FC = () => {
   )
 }
 
-const useStyles2 = makeStyles((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-    display: "-webkit-box", // See (1)
-    marginTop: theme.spacing(0.5),
-    maxWidth: "110%",
-    minWidth: 0,
-    overflow: "hidden", // See (1)
-    textAlign: "center",
-    textOverflow: "ellipsis", // See (1)
-    whiteSpace: "normal", // See (1)
-
-    // (1) - These styles, along with clamping make it so that not only
-    // can text not overflow horizontally, but there can also only be a
-    // maximum of 2 line breaks. This is standard behaviour on OS files
-    // (ex: Windows 10 Desktop application) to prevent excessive vertical
-    // line wraps. This is important in Generic Applications, as we have no
-    // control over the application name used in the manifest.
-    ["-webkit-line-clamp"]: 2,
-    ["-webkit-box-orient"]: "vertical",
-  },
-}))
-
-export const ProjectName: React.FC = ({ children }) => {
-  const styles = useStyles2()
-
-  return (
-    <Typography className={styles.root} noWrap variant="body2">
-      {children}
-    </Typography>
-  )
-}
-
 export const ProjectIcon: React.FC<ProjectIconProps> = ({ icon, title, onClick }) => {
   const styles = useStyles()
 

diff --git a/site/components/Project/ProjectName.tsx b/site/components/Project/ProjectName.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+import { Box, makeStyles, Typography } from "@material-ui/core"
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    color: theme.palette.text.secondary,
+    display: "-webkit-box", // See (1)
+    marginTop: theme.spacing(0.5),
+    maxWidth: "110%",
+    minWidth: 0,
+    overflow: "hidden", // See (1)
+    textAlign: "center",
+    textOverflow: "ellipsis", // See (1)
+    whiteSpace: "normal", // See (1)
+
+    // (1) - These styles, along with clamping make it so that not only
+    // can text not overflow horizontally, but there can also only be a
+    // maximum of 2 line breaks. This is standard behaviour on OS files
+    // (ex: Windows 10 Desktop application) to prevent excessive vertical
+    // line wraps. This is important in Generic Applications, as we have no
+    // control over the application name used in the manifest.
+    ["-webkit-line-clamp"]: 2,
+    ["-webkit-box-orient"]: "vertical",
+  },
+}))
+
+export const ProjectName: React.FC = ({ children }) => {
+  const styles = useStyles2()
+
+  return (
+    <Typography className={styles.root} noWrap variant="body2">
+      {children}
+    </Typography>
+  )
+}