feat(ui-frontpage): add AuthorizedDictyNewsTitle component for displa…

…ying news title with create news button

The AuthorizedDictyNewsTitle component is added to the project to display the title "Dicty News" along with an Announcement icon. It also includes a button labeled "Write News Article" that, when clicked, navigates the user to the "/news/create" route. This component enhances the user experience by providing a visually appealing and functional section for managing news articles.

packages/ui-frontpage/src/news/AuthorizedDictyNewsTitle.tsx

@@ -0,0 +1,45 @@
+import { Grid, Typography, Button } from "@material-ui/core"
+import { useNavigate } from "react-router-dom"
+import CreateIcon from "@material-ui/icons/Create"
+import AnnouncementIcon from "@material-ui/icons/Announcement"
+import { makeStyles } from "@material-ui/core/styles"
+
+const useDictyNewsStyles = makeStyles({
+  newsIcon: {
+    display: "block",
+  },
+})
+
+const AuthorizedDictyNewsTitle = () => {
+  const { newsIcon } = useDictyNewsStyles()
+  const navigate = useNavigate()
+  const handleClick = () => {
+    navigate("/news/create")
+  }
+  return (
+    <Grid container justifyContent="space-between" spacing={1}>
+      <Grid item>
+        <Grid container spacing={1} alignItems="center">
+          <Grid item>
+            <Typography variant="h1">Dicty News</Typography>
+          </Grid>
+          <Grid item>
+            <AnnouncementIcon className={newsIcon} />
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid item>
+        <Button
+          color="primary"
+          variant="outlined"
+          size="large"
+          startIcon={<CreateIcon />}
+          onClick={handleClick}>
+          Write News Article
+        </Button>
+      </Grid>
+    </Grid>
+  )
+}
+
+export { AuthorizedDictyNewsTitle }