論文情報テキストを作成するツールをNext.jsで実装

1
npx create-next-app@latest .

1
✔ Would you like to use TypeScript? … No / Yes
2
✔ Would you like to use ESLint? … No / Yes
3
✔ Would you like to use Tailwind CSS? … No / Yes
4
✔ Would you like your code inside a `src/` directory? … No / Yes
5
✔ Would you like to use App Router? (recommended) … No / Yes
6
✔ Would you like to use Turbopack for `next dev`? … No / Yes
7
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

1
npm run dev
2
# http://localhost:3000/

1
npm i @ark-ui/react destyle.css lucide-react react-toastify

1
npm i -D sass

1
import { useState } from 'react';
2
import { Checkbox } from '@ark-ui/react/checkbox';
3
import { CheckIcon } from 'lucide-react'
4
import styles from './InputCheckbox.module.scss';
5

6
interface Props {
7
  label: string;
8
  name: string;
9
  onChangeStatus(name: string, isChecked: boolean): void;
10
};
11

12
export default function InputCheckbox({label, name, onChangeStatus}: Props) {
13
  const [checked, setChecked] = useState<Checkbox.CheckedState>(false);
14

15
  const handleChange = (checked: Checkbox.CheckedState) => {
16
    if (checked === 'indeterminate') return; // 今回は不確定要素を考慮しない
17
    setChecked(checked);
18
    onChangeStatus(name, checked);
19
  };
20

21
  return (
22
    <Checkbox.Root
23
      className={styles.wrapper}
24
      checked={checked}
25
      onCheckedChange={(e) => handleChange(e.checked)}
26
    >
27
      <Checkbox.Control className={styles.checkbox}>
28
        <Checkbox.Indicator>
29
          <CheckIcon />
30
        </Checkbox.Indicator>
31
      </Checkbox.Control>
32
      <Checkbox.HiddenInput name={name} className={styles.input} />
33
      <Checkbox.Label>{label}</Checkbox.Label>
34
    </Checkbox.Root>
35
  );
36
}