ニコニコ実況 過去ログ (番組表)

Author: Midra429

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@internationalized/date": "^3.5.6",
-    "@midra/nco-api": "^1.8.3",
+    "@midra/nco-api": "^1.8.4",
     "@midra/nco-parser": "^1.0.25",
     "@nextui-org/react": "^2.4.8",
     "@webext-core/messaging": "^1.4.0",

pnpm-lock.yaml

@@ -9,8 +9,11 @@ import {
   ModalBody as NextUIModalBody,
   ModalFooter as NextUIModalFooter,
 } from '@nextui-org/react'
+import { XIcon } from 'lucide-react'
 
 export type ModalProps = {
+  fullWidth?: boolean
+
   isOpen: NextUIModalProps['isOpen']
   onOpenChange: NextUIModalProps['onOpenChange']
   onClose?: NextUIModalProps['onClose']
@@ -36,7 +39,7 @@ export const Modal: React.FC<ModalProps> = (props) => {
     <NextUIModal
       classNames={{
         wrapper: 'justify-end',
-        base: 'max-w-[370px]',
+        base: !props.fullWidth && 'max-w-[370px]',
         header: 'border-b-1 border-foreground-200 p-2 text-medium',
         body: 'p-0',
         footer: 'border-t-1 border-foreground-200 p-2',
@@ -63,7 +66,9 @@ export const Modal: React.FC<ModalProps> = (props) => {
                     {props.header}
                   </div>
 
-                  {props.headerEndContent}
+                  <div className="shrink-0 font-normal">
+                    {props.headerEndContent}
+                  </div>
                 </NextUIModalHeader>
               )}
 
@@ -79,7 +84,9 @@ export const Modal: React.FC<ModalProps> = (props) => {
                         size="sm"
                         variant="flat"
                         color="default"
-                        startContent={props.cancelIcon}
+                        startContent={
+                          props.cancelIcon || <XIcon className="size-4" />
+                        }
                         onPress={onClose}
                       >
                         {props.cancelText || 'キャンセル'}

src/components/modal.tsx

@@ -7,12 +7,19 @@ import {
   useDisclosure,
   cn,
 } from '@nextui-org/react'
-import { ChevronDownIcon, PlusIcon } from 'lucide-react'
+import {
+  PlusIcon,
+  ChevronDownIcon,
+  CalendarClockIcon,
+  Table2Icon,
+} from 'lucide-react'
 
 import { JikkyoSelector } from './JikkyoSelector'
+import { JikkyoEpgSelector } from './JikkyoEpgSelector'
 
 export const Header: React.FC = () => {
   const jkModalDc = useDisclosure()
+  const jkEpgModalDc = useDisclosure()
 
   return (
     <>
@@ -40,13 +47,14 @@ export const Header: React.FC = () => {
           <DropdownTrigger>
             <Button
               className={cn(
-                '[&>svg]:rotate-0 [&[aria-expanded="true"]>svg]:rotate-180',
-                '[&>svg]:transition-transform'
+                '[&>svg:last-child]:rotate-0 [&[aria-expanded="true"]>svg]:rotate-180',
+                '[&>svg:last-child]:transition-transform'
               )}
               size="sm"
               variant="flat"
               color="primary"
               disableRipple
+              startContent={<PlusIcon className="size-4" />}
               endContent={<ChevronDownIcon className="size-4" />}
             >
               追加
@@ -55,11 +63,18 @@ export const Header: React.FC = () => {
 
           <DropdownMenu variant="flat" color="primary">
             <DropdownItem
-              startContent={<PlusIcon className="size-4" />}
+              startContent={<CalendarClockIcon className="size-4" />}
               onPress={jkModalDc.onOpen}
             >
               ニコニコ実況 過去ログ
             </DropdownItem>
+
+            <DropdownItem
+              startContent={<Table2Icon className="size-4" />}
+              onPress={jkEpgModalDc.onOpen}
+            >
+              ニコニコ実況 過去ログ (番組表)
+            </DropdownItem>
           </DropdownMenu>
         </Dropdown>
       </div>
@@ -68,6 +83,11 @@ export const Header: React.FC = () => {
         isOpen={jkModalDc.isOpen}
         onOpenChange={jkModalDc.onOpenChange}
       />
+
+      <JikkyoEpgSelector
+        isOpen={jkEpgModalDc.isOpen}
+        onOpenChange={jkEpgModalDc.onOpenChange}
+      />
     </>
   )
 }