Merge pull request #64 from Sports-day/feature/information-in-dashboard

ダッシュボードにお知らせリストを追加 feat: information list in dashboard

app/(authenticated)/information/create/page.tsx

@@ -19,7 +19,7 @@ export default function InformationCreatePage() {
                 <Link
                     underline="hover"
                     color="inherit"
-                    href={"/tags/"}
+                    href={"/information/"}
                     component={NextLink}
                 >
                     お知らせ管理

app/(authenticated)/page.tsx

@@ -1,21 +1,22 @@
-import {Breadcrumbs, Grid, Stack, Typography, useTheme} from "@mui/material"
+import {Breadcrumbs, Grid, Stack, Typography} from "@mui/material"
 import CardBackground from "@/components/layout/cardBackground"
-import CardLarge from "@/components/layout/cardLarge"
 import SportsList from "@/components/sports/sportsList"
 import {sportFactory} from "@/src/models/SportModel"
 import InProgressMatchList from "@/components/match/inProgressMatchList"
+import {informationFactory} from "@/src/models/InformationModel";
+import InformationList from "@/components/information/informationList";
 
 export default async function Home() {
     const sports = await sportFactory().index()
+    const informationList = await informationFactory().index()
+
     return (
         <Stack spacing={2} mx={2} my={3}>
             <Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
                 <Typography color="text.primary">管理者のダッシュボード</Typography>
             </Breadcrumbs>
-            <CardBackground title={"配信中のお知らせ"} button={"お知らせを作成・編集"}>
-                <CardLarge>
-                    この機能は開発中です
-                </CardLarge>
+            <CardBackground title={"配信中のお知らせ"} button={"お知らせを作成・編集"} link={"/information"}>
+                <InformationList informationList={informationList}/>
             </CardBackground>
             <CardBackground title={"競技から選ぶ"} button={"競技を作成・編集する"} link={"/sports"}>
                 <Grid container spacing={1}>

components/information/informationAgGrid.tsx

@@ -13,6 +13,7 @@ ModuleRegistry.registerModules([ClientSideRowModelModule]);
 
 export type InformationAgGridProps = {
     informationList: Information[]
+    dashboard?: boolean
 }
 
 // Row Data Interface
@@ -24,7 +25,7 @@ type IRow = {
 
 // Create new GridExample component
 export default function InformationAgGrid(props: InformationAgGridProps) {
-    const height = 'calc(100vh - 230px)';
+    const height = props.dashboard ? '200px' : 'calc(100vh - 230px)';
     const router = useRouter()
     // Row Data: The data to be displayed.
     const [rowData, setRowData] = useState<IRow[]>([])

components/information/informationList.tsx

@@ -0,0 +1,57 @@
+import {Information} from "@/src/models/InformationModel";
+import {Stack, Typography, IconButton, Button} from "@mui/material";
+import {HiOutlineInformationCircle} from "react-icons/hi";
+import React from "react";
+
+export type InformationListProps = {
+    informationList: Information[]
+}
+
+export default function InformationList(props: InformationListProps) {
+    const list = props.informationList.map((information) => {
+        return (
+            <Button href={`/information/${information.id}`} sx={{py:1.5, px:2,mb:1, width:"100%", backgroundColor:"secondary.main", color:"text.primary"}} key={information.id}>
+                <Stack spacing={1} direction={"row"} width={"100%"} justifyContent={"flex-start"} alignItems="center">
+                    <Typography
+                        color={"text.primary"}
+                        sx={{fontSize: "12px", mx:2}}
+                        lineHeight={"1.2em"}
+                    >
+                        {information.id}
+                    </Typography>
+                    <IconButton
+                        sx={{backgroundColor: "background.default"}}
+                    >
+                        <HiOutlineInformationCircle color={"text.primary"}/>
+                    </IconButton>
+                    <Stack
+                        direction={"column"}
+                        justifyContent={"space-between"}
+                        alignItems={"flex-start"}
+                        spacing={1}
+                    >
+                        <Typography
+                            color={"text.primary"}
+                            sx={{fontSize: "14px", fontWeight: "bold"}}
+                            lineHeight={"1.2em"}
+                        >
+                            {information.name}
+                        </Typography>
+                        <Typography
+                            color={"text.primary"}
+                            sx={{fontSize: "14px"}}
+                            lineHeight={"1.2em"}
+                        >
+                            {information.content}
+                        </Typography>
+                    </Stack>
+                </Stack>
+            </Button>
+        )
+    })
+    return (
+        <>
+            {list}
+        </>
+    )
+}