sample output on asset details

src/components/organisms/AssetContent/MetaSecondary.tsx

@@ -1,10 +1,9 @@
 import React, { ReactElement } from 'react'
-import shortid from 'shortid'
-import { ListItem } from '../../atoms/Lists'
 import MetaItem from './MetaItem'
 import styles from './MetaSecondary.module.css'
 import { MetadataMarket } from '../../../@types/Metadata'
 import Tags from '../../atoms/Tags'
+import Button from '../../atoms/Button'
 
 export default function MetaSecondary({
   metadata
@@ -15,18 +14,21 @@ export default function MetaSecondary({
 
   return (
     <aside className={styles.metaSecondary}>
-      {links && (
+      {links && links.length && (
         <div className={styles.samples}>
           <MetaItem
             title="Sample Data"
             content={
-              <ul>
+              <Button
-                {links?.map((link) => (
+                href={links[0].url}
-                  <ListItem key={shortid.generate()}>
+                target="_blank"
-                    <a href={link.url}>{link.name}</a>
+                rel="noreferrer"
-                  </ListItem>
+                download
-                ))}
+                style="text"
-              </ul>
+                size="small"
+              >
+                Download Sample
+              </Button>
             }
           />
         </div>

src/components/organisms/AssetContent/index.tsx

@@ -27,7 +27,7 @@ export default function AssetContent({
       <div className={styles.content}>
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
-          {categories && (
+          {categories && categories.length && (
             <p>
               <Link to={`/search?categories=["${categories[0]}"]`}>
                 {categories[0]}