#399

frontend/src/components/posts/PostThumbnailPreview.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 
+import { cn } from '@/lib/utils'
+
 import type { FC } from 'react'
 
 type Props = {
@@ -21,8 +23,10 @@ const PostThumbnailPreview: FC<Props> = (
     {
       return (
           <div
-              className={`${ className } flex items-center justify-center rounded border
-                          border-border bg-muted text-xs text-muted-foreground`}>
+              className={cn (
+                  className,
+                  'flex items-center justify-center rounded border',
+                  'border-border bg-muted text-xs text-muted-foreground')}>
             なし
           </div>)
     }
@@ -31,10 +35,12 @@ const PostThumbnailPreview: FC<Props> = (
     {
       return (
           <div
-              className={`${ className } flex items-center justify-center rounded border
-                          border-amber-300 bg-amber-50 p-2 text-center text-xs
-                          text-amber-700 dark:border-amber-900 dark:bg-amber-950
-                          dark:text-amber-200`}>
+              className={cn (
+                  className,
+                  'flex items-center justify-center rounded border',
+                  'border-amber-300 bg-amber-50 p-2 text-center text-xs',
+                  'text-amber-700 dark:border-amber-900 dark:bg-amber-950',
+                  'dark:text-amber-200')}>
             サムネールを表示できません
           </div>)
     }
@@ -43,7 +49,7 @@ const PostThumbnailPreview: FC<Props> = (
       <img
           src={url}
           alt={alt}
-          className={`${ className } rounded border border-border object-cover`}
+          className={cn (className, 'rounded border border-border object-cover')}
           onError={() => setFailed (true)}/>)
 }