fix: csb css tweaks

pmndrs · Aug 31, 2024 · 59ad990 · 59ad990
1 parent 9a2d0b3
commit 59ad990
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 27 deletions.
diff --git a/src/components/mdx/Codesandbox/Codesandbox.tsx b/src/components/mdx/Codesandbox/Codesandbox.tsx
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import { Img } from '@/components/mdx'
 
 import cn from '@/lib/cn'
 
@@ -40,36 +40,29 @@ export function Codesandbox({
  rel="noreferrer"
  className="mb-2 block"
  >
- {screenshot_url && (
- <Image
- src={screenshot_url}
- placeholder="empty"
- alt={title}
- width={1763}
- height={926}
- loading="lazy"
- />
- )}
+ {screenshot_url && <Img src={screenshot_url} alt={title} width={1763} height={926} />}
  </a>
  )}
 
  {!hideTitle && (
  <>
- <h6 className={cn('mt-4 font-bold')}>{title}</h6>
- <p className={cn('mt-1')}>{description}</p>
- <div className="w-full">
- {tags.map((tag, i) => (
- <span
- key={i}
- className={cn(
- 'mt-2 inline-block rounded px-1 py-1 text-xs',
- i !== tags.length - 1 && 'mr-1',
- )}
- >
- {tag}
- </span>
- ))}
- </div>
+ <h6 className={cn('mt-2 text-xs text-on-surface-variant')}>{title}</h6>
+ {description && <p className={cn('mt-1')}>{description}</p>}
+ {tags.length > 0 && (
+ <div>
+ {tags.map((tag, i) => (
+ <span
+ key={i}
+ className={cn(
+ 'mt-2 inline-block rounded px-1 py-1 text-xs',
+ i !== tags.length - 1 && 'mr-1',
+ )}
+ >
+ {tag}
+ </span>
+ ))}
+ </div>
+ )}
  </>
  )}
  </>

diff --git a/src/components/mdx/Img/Img.tsx b/src/components/mdx/Img/Img.tsx
@@ -38,7 +38,7 @@ export async function Img({
  decoding="async"
  loading="lazy"
  alt={alt}
- className={cn('bg-surface-container inline-block rounded-lg', className)}
+ className={cn('bg-surface-container rounded-lg', className)}
  {...dims}
  {...props}
  />