Merge pull request #278 from k35o/refactor

簡単なリファクタ
k35o · Sep 21, 2024 · d0df22c · d0df22c
2 parents ac60985 + fb6bdd3
commit d0df22c
Show file tree

Hide file tree

Showing 21 changed files with 85 additions and 127 deletions.
diff --git a/src/app/blog/color-contrast/layout.tsx b/src/app/blog/color-contrast/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import { BlogLayout } from '../_components/blog-layout/blog-layout';
+import { PropsWithChildren } from 'react';
 
 export const metadata: Metadata = {
  title: '色のコントラスト比は重要だけどどうやって求めるんだっけ？',
@@ -28,11 +29,7 @@ export const metadata: Metadata = {
 // TODO:pprが利用可能になったら切り替える
 export const dynamic = 'force-dynamic';
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <BlogLayout updatedAt="2024/02/12" slug="color-contrast">
  {children}

diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
 import { ExternalBlog } from './_components/external-blog';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Blog',
@@ -20,11 +21,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <>
  {/* Get the latest one from: https://katex.org/docs/browser */}

diff --git a/src/app/blog/tanstack-router-introduction/layout.tsx b/src/app/blog/tanstack-router-introduction/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 import { BlogLayout } from '../_components/blog-layout/blog-layout';
+import { PropsWithChildren } from 'react';
 
 export const metadata: Metadata = {
  title: 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ',
@@ -30,11 +31,7 @@ export const metadata: Metadata = {
 // TODO:pprが利用可能になったら切り替える
 export const dynamic = 'force-dynamic';
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <BlogLayout
  updatedAt="2023/07/13"

diff --git a/src/app/blog/tanstack-router-introduction/page.mdx b/src/app/blog/tanstack-router-introduction/page.mdx
@@ -50,7 +50,7 @@ npm i -D @tanstack/router-devtools@beta
 ```tsx
 const TanStackRouterDevtools = import.meta.env.DEV
  ? // 遅延読み込みする
- React.lazy(() =>
+ lazy(() =>
  import('@tanstack/router-devtools').then((res) => ({
  default: res.TanStackRouterDevtools,
  })),

diff --git a/src/app/characters/check-syntax/_state/text.tsx b/src/app/characters/check-syntax/_state/text.tsx
@@ -2,14 +2,16 @@
 
 import {
  createContext,
+ Dispatch,
  FC,
  PropsWithChildren,
+ SetStateAction,
  useCallback,
  useContext,
  useState,
 } from 'react';
 
-type Setter<T> = React.Dispatch<React.SetStateAction<T>>;
+type Setter<T> = Dispatch<SetStateAction<T>>;
 export type ResultMessage = Record<number, string[]>;
 
 const TextContext = createContext<string | undefined>(undefined);

diff --git a/src/app/characters/check-syntax/layout.tsx b/src/app/characters/check-syntax/layout.tsx
@@ -1,5 +1,6 @@
 import { Heading } from '@/components/heading';
 import { CheckSyntaxProvider } from './_state/text';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: '日本語校正くん',
@@ -19,11 +20,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <Heading type="h3">日本語校正くん</Heading>

diff --git a/src/app/characters/counter/layout.tsx b/src/app/characters/counter/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: '文字数カウンター',
@@ -18,11 +19,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <Heading type="h3">文字数カウンター</Heading>

diff --git a/src/app/characters/layout.tsx b/src/app/characters/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Characters',
@@ -21,11 +22,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-6">
  <Link href="/characters">

diff --git a/src/app/colors/contrasts/layout.tsx b/src/app/colors/contrasts/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'コントラスト比チェッカー',
@@ -18,11 +19,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <Heading type="h3">コントラスト比チェッカー</Heading>

diff --git a/src/app/colors/converter/layout.tsx b/src/app/colors/converter/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: '色変換ツール',
@@ -18,11 +19,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <Heading type="h3">色変換ツール</Heading>

diff --git a/src/app/colors/layout.tsx b/src/app/colors/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Colors',
@@ -19,11 +20,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-6">
  <Link href="/colors">

diff --git a/src/app/designs/layout.tsx b/src/app/designs/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Designs',
@@ -19,11 +20,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-6">
  <Link href="/number">

diff --git a/src/app/designs/rounded/layout.tsx b/src/app/designs/rounded/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'かどまるラボ',
@@ -18,11 +19,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <Heading type="h3">かどまるラボ</Heading>

diff --git a/src/app/engineerings/creating/layout.tsx b/src/app/engineerings/creating/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'テーブル作成',
@@ -15,11 +16,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex flex-col gap-4">
  <Heading type="h3">テーブル作成</Heading>

diff --git a/src/app/engineerings/layout.tsx b/src/app/engineerings/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Engineerings',
@@ -22,11 +23,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex flex-col gap-6">
  <Link href="/engineerings">

diff --git a/src/app/number/converter/layout.tsx b/src/app/number/converter/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: '基数変換ツール',
@@ -18,11 +19,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <Heading type="h3">基数変換ツール</Heading>

diff --git a/src/app/number/layout.tsx b/src/app/number/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Number',
@@ -19,11 +20,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-6">
  <Link href="/number">

diff --git a/src/app/quizzes/fish-kanji/layout.tsx b/src/app/quizzes/fish-kanji/layout.tsx
@@ -1,4 +1,5 @@
 import { Heading } from '@/components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'うおへんクイズ',
@@ -18,11 +19,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-4">
  <div className="font-notoSansJp" />

diff --git a/src/app/quizzes/layout.tsx b/src/app/quizzes/layout.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { Heading } from '../../components/heading';
+import { PropsWithChildren } from 'react';
 
 export const metadata = {
  title: 'Quizzes',
@@ -19,11 +20,7 @@ export const metadata = {
  },
 };
 
-export default function Layout({
- children,
-}: {
- children: React.ReactNode;
-}) {
+export default function Layout({ children }: PropsWithChildren) {
  return (
  <div className="flex h-full flex-col gap-6">
  <Link href="/quizzes">

diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -16,7 +16,6 @@ import {
  useListNavigation,
 } from '@floating-ui/react';
 import { ChevronDown } from 'lucide-react';
-import { cn } from '@/utils/cn';
 import {
  MenuContextProvider,
  useMenuContent,
@@ -27,6 +26,7 @@ import clsx from 'clsx';
 import { Popover } from '../popover';
 import { useFloatingUIContext } from '../popover/hooks';
 import { Button } from '../button';
+import { IconButton } from '../icon-button';
 
 const Root: FC<PropsWithChildren<{ placement?: Placement }>> = ({
  children,
@@ -142,17 +142,10 @@ const IconTrigger: FC<{
  return (
  <Popover.Trigger
  renderItem={(props) => (
- <button
- type="button"
- className={cn(
- 'inline-flex rounded-full bg-bgTransparent hover:bg-bgHover focus-visible:ring-2 focus-visible:ring-borderFocus active:bg-bgActive',
- 'p-2',
- )}
- {...getTriggerProps(props)}
- >
+ <IconButton {...getTriggerProps(props)}>
  <span className="sr-only">{label}</span>
  {icon}
- </button>
+ </IconButton>
  )}
  />
  );