create for series

components/CacheUpdateManager.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useRouter } from 'next/router'
 import { nostrAuthService } from '@/lib/nostrAuth'
 import { objectCache } from '@/lib/objectCache'
-import { Button, ErrorState } from './ui'
+import { Button, Card, ErrorState } from './ui'
 
 async function updateCache(): Promise<void> {
   const state = nostrAuthService.getState()
@@ -81,7 +81,7 @@ export function CacheUpdateManager(): React.ReactElement {
   const isConnected = state.connected && state.pubkey
 
   return (
-    <div className="bg-cyber-darker border border-neon-cyan/30 rounded-lg p-6">
+    <Card variant="default" className="bg-cyber-darker">
       <h2 className="text-2xl font-bold text-neon-cyan mb-4">Mise à jour du cache</h2>
 
       <p className="text-cyber-accent mb-4 text-sm">
@@ -104,6 +104,6 @@ export function CacheUpdateManager(): React.ReactElement {
       >
         {updating ? 'Mise à jour en cours...' : 'Mettre à jour le cache'}
       </Button>
-    </div>
+    </Card>
   )
 }

components/SeriesSection.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
+import { Button } from './ui'
 import type { Series } from '@/types/nostr'
 import { SeriesList } from './SeriesList'
 import { SeriesStats } from './SeriesStats'
@@ -43,22 +44,25 @@ function SeriesControls({
 }): React.ReactElement {
   return (
     <div className="flex items-center gap-2">
-      <button
+      <Button
         type="button"
-        className="px-3 py-1 text-sm rounded bg-gray-200"
+        variant="secondary"
+        size="small"
         onClick={() => onSelect(undefined)}
       >
         Toutes les séries
-      </button>
+      </Button>
-      <button
+      <Button
         type="button"
-        className="text-xs text-blue-600 underline"
+        variant="ghost"
+        size="small"
         onClick={() => {
           void onReload()
         }}
+        className="text-xs underline"
       >
         Recharger
-      </button>
+      </Button>
     </div>
   )
 }

components/nip95Config/Nip95ConfigContent.tsx

@@ -1,5 +1,5 @@
 import type { Nip95Config } from '@/lib/configStorageTypes'
-import { Button, Card, Input } from '../ui'
+import { Button, Card, Input, ErrorState } from '../ui'
 import { t } from '@/lib/i18n'
 import { Nip95ApiList } from './Nip95ApiList'
 
@@ -39,11 +39,11 @@ export function Nip95ConfigContent(params: {
 
 function ErrorBanner(params: { error: string; onClear: () => void }): React.ReactElement {
   return (
-    <div className="bg-red-900/30 border border-red-500/50 rounded p-4 text-red-300">
+    <div>
-      {params.error}
+      <ErrorState message={params.error} />
-      <button type="button" onClick={params.onClear} className="ml-4 text-red-400 hover:text-red-200">
+      <Button type="button" variant="ghost" size="small" onClick={params.onClear} className="mt-2">
         ×
-      </button>
+      </Button>
     </div>
   )
 }

components/relayManager/RelayManagerContent.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Input } from '../ui'
+import { Button, Card, Input, ErrorState } from '../ui'
 import { t } from '@/lib/i18n'
 import { RelayList } from './RelayList'
 import type { RelayManagerContentProps } from './types'
@@ -32,11 +32,11 @@ export function RelayManagerContent(params: RelayManagerContentProps): React.Rea
 
 function ErrorBanner(params: { error: string; onClear: () => void }): React.ReactElement {
   return (
-    <div className="bg-red-900/30 border border-red-500/50 rounded p-4 text-red-300">
+    <div>
-      {params.error}
+      <ErrorState message={params.error} />
-      <button type="button" onClick={params.onClear} className="ml-4 text-red-400 hover:text-red-200">
+      <Button type="button" variant="ghost" size="small" onClick={params.onClear} className="mt-2">
         ×
-      </button>
+      </Button>
     </div>
   )
 }