created AssetTypeDetails component and added it to asset details

src/components/atoms/AssetTypeDetails.module.css

@@ -0,0 +1,24 @@
+.typeDetails {
+  position: absolute;
+  top: calc(var(--spacer) / 3);
+  right: calc(var(--spacer) / 3);
+  width: auto;
+  font-size: var(--font-size-mini);
+}
+
+.icon {
+  fill: var(--brand-grey-light);
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: baseline;
+  margin-bottom: -0.2em;
+  display: inline-block;
+}
+
+.typeLabel {
+  display: inline-block;
+  text-transform: uppercase;
+  border-right: 1px solid var(--border-color);
+  padding-right: calc(var(--spacer) / 3.5);
+  margin-right: calc(var(--spacer) / 4);
+}

src/components/atoms/AssetTypeDetails.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react'
+import styles from './AssetTypeDetails.module.css'
+import { ReactComponent as Compute } from '../../images/compute.svg'
+import { ReactComponent as Download } from '../../images/download.svg'
+
+export default function AssetTypeDetails({
+  type,
+  accessType
+}: {
+  type: string
+  accessType: string
+}): ReactElement {
+  return (
+    <aside className={styles.typeDetails}>
+      <div className={styles.typeLabel}>
+        {type === 'dataset' ? 'data set' : 'algorithm'}
+      </div>
+      {accessType === 'access' ? (
+        <Download role="img" aria-label="Download" className={styles.icon} />
+      ) : (
+        <Compute role="img" aria-label="Compute" className={styles.icon} />
+      )}
+    </aside>
+  )
+}

src/components/molecules/AssetTeaser.module.css

@@ -61,28 +61,3 @@
   font-size: var(--font-size-mini);
   margin-top: calc(var(--spacer) / 2);
 }
-
-.typeDetails {
-  position: absolute;
-  top: calc(var(--spacer) / 3);
-  right: calc(var(--spacer) / 3);
-  width: auto;
-  font-size: var(--font-size-mini);
-}
-
-.icon {
-  fill: var(--brand-grey-light);
-  width: 1.1em;
-  height: 1.1em;
-  vertical-align: baseline;
-  margin-bottom: -0.2em;
-  display: inline-block;
-}
-
-.typeLabel {
-  display: inline-block;
-  text-transform: uppercase;
-  border-right: 1px solid var(--border-color);
-  padding-right: calc(var(--spacer) / 3.5);
-  margin-right: calc(var(--spacer) / 4);
-}

src/components/molecules/AssetTeaser.tsx

@@ -8,8 +8,7 @@ import removeMarkdown from 'remove-markdown'
 import Publisher from '../atoms/Publisher'
 import { useMetadata } from '@oceanprotocol/react'
 import Time from '../atoms/Time'
-import { ReactComponent as Compute } from '../../images/compute.svg'
+import AssetTypeDetails from '../atoms/AssetTypeDetails'
-import { ReactComponent as Download } from '../../images/download.svg'
 
 declare type AssetTeaserProps = {
   ddo: DDO
@@ -33,20 +32,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({ ddo }: AssetTeaserProps) => {
           <Publisher account={owner} minimal className={styles.publisher} />
         </header>
 
-        <aside className={styles.typeDetails}>
+        <AssetTypeDetails type={type} accessType={accessType} />
-          <div className={styles.typeLabel}>
-            {type === 'dataset' ? 'data set' : 'algorithm'}
-          </div>
-          {accessType === 'access' ? (
-            <Download
-              role="img"
-              aria-label="Download"
-              className={styles.icon}
-            />
-          ) : (
-            <Compute role="img" aria-label="Compute" className={styles.icon} />
-          )}
-        </aside>
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>

src/components/organisms/AssetContent/index.module.css

@@ -42,3 +42,7 @@
   margin-left: calc(var(--spacer) / 4);
   margin-right: calc(var(--spacer) / 4);
 }
+
+.content [class*='typeDetails'] {
+  right: calc(var(--spacer) * 2) !important;
+}

src/components/organisms/AssetContent/index.tsx

@@ -15,6 +15,7 @@ import Button from '../../atoms/Button'
 import Edit from '../AssetActions/Edit'
 import DebugOutput from '../../atoms/DebugOutput'
 import MetaMain from './MetaMain'
+import AssetTypeDetails from '../../atoms/AssetTypeDetails'
 // import EditHistory from './EditHistory'
 
 export interface AssetContentProps {
@@ -46,8 +47,9 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
   const { owner, isInPurgatory, purgatoryData } = useAsset()
   const [showPricing, setShowPricing] = useState(false)
   const [showEdit, setShowEdit] = useState<boolean>()
-  const { ddo, price, metadata } = useAsset()
+  const { ddo, price, metadata, type } = useAsset()
   const isOwner = accountId === owner
+  const accessType = ddo.service[1].type
 
   useEffect(() => {
     if (!price) return
@@ -67,6 +69,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
       <div>
         {showPricing && <Pricing ddo={ddo} />}
         <div className={styles.content}>
+          <AssetTypeDetails type={type} accessType={accessType} />
           <MetaMain />
           <Bookmark did={ddo.id} />