dot-tutor/learn/src/components/TopBar.tsx at 086a5a3e20d6be5081ef23041802e2afecfb7806 · ut-code/dot-tutor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { useState, useEffect } from "react";
import Head from "next/head";
import NextLink from "next/link";
import Image from "next/image";
import TutorialDialog from "@/components/TutorialDialog";
import {
  AppBar,
  Toolbar,
  Stack,
  Typography,
  Link,
  IconButton,
} from "@mui/material";
import GitHubIcon from "@mui/icons-material/GitHub";
import { type TutorialDialogSteps } from "../types/Tutorial";
import CommonButton from "./CommonButton";

export default function TopBar({
  tutorialDialogSteps,
}: {
  tutorialDialogSteps?: TutorialDialogSteps;
}): JSX.Element {
  const [isTutorialOpen, setIsTutorialOpen] = useState<boolean>(true);
  useEffect(() => {
    setIsTutorialOpen(true);
  }, [tutorialDialogSteps]);
  return (
    <>
      <Head>
        <title>Dot Tutor Learn</title>
        <meta
          name="description"
          content="チュートリアルを通して点字について学ぶことのできる、体験型点字学習ソフトウェアです。"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" type="image/svg+xml" href="/favicon-learn.svg" />
      </Head>
      <AppBar component="nav">
        <Toolbar>
          <Stack direction="row" spacing={2} alignItems="center" flexGrow={1}>
            <Image
              src="/learn-logo-blue.svg"
              alt="ロゴ"
              width="40"
              height="40"
            />
            <Typography variant="h5" component="div" sx={{ fontWeight: 550 }}>
              <Link
                href="/"
                component={NextLink}
                color="inherit"
                underline="hover"
              >
                Dot Tutor Learn
              </Link>
            </Typography>
          </Stack>
          <Stack direction="row" spacing={2} alignItems="center">
            {tutorialDialogSteps !== undefined && (
              <>
                <CommonButton
                  variant="contained"
                  onClick={() => {
                    setIsTutorialOpen(true);
                  }}
                >
                  スライドで確認
                </CommonButton>
                <TutorialDialog
                  open={isTutorialOpen}
                  setOpen={setIsTutorialOpen}
                  tutorialDialogSteps={tutorialDialogSteps}
                />
              </>
            )}
            <IconButton
              color="inherit"
              href="https://github.com/ut-code/learn-braille"
            >
              <GitHubIcon fontSize="large" />
            </IconButton>
          </Stack>
        </Toolbar>
      </AppBar>
    </>
  );
}