Card as separate component

theme-source/partials/list.tsx

@@ -43,96 +43,28 @@ export function List({ subtags, tag, content, metadata, file, config }) {
           }}
         >
           {content.map(page => (
-            <div
+            <Card
               key={page.file}
-              css={{
-                '@media (min-width: 37.56rem)': {
-                  width: 'calc(50% - 0.75rem)',
-                },
-                '@media (min-width: 62rem)': {
-                  width: 'calc(33.3333% - 0.75rem)',
-                },
-                margin: '10px 0',
-                overflow: 'hidden',
-                textAlign: 'justify',
-                backgroundColor: 'white',
-                boxShadow:
-                  '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-            >
-              <a href={`/${page.file}`}>
-                <div
-                  css={{
-                    height: 120,
-                    backgroundColor: '#0288d1',
-                    backgroundImage: page.metadata.image
-                      ? `url('${relURL(page.metadata.image, page.file)}')`
-                      : undefined,
-                    backgroundSize: 'cover',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundPosition: '50% 50%',
-                  }}
-                ></div>
-              </a>
-              <div
-                css={css`
-                  margin: 10px 0;
-                  height: 50px;
-                `}
-              >
-                <a href={`/${page.file}`}>
-                  <h5
-                    css={{
-                      textAlign: 'center',
-                      fontSize: '1.3rem',
-                      margin: '0 10px',
-                    }}
-                  >
-                    {page.metadata.title}
-                  </h5>
-                </a>
-              </div>
-              <div css={{ padding: '0px 10px' }}>
-                {page.metadata.perex
+              file={page.file}
+              image={page.metadata.image}
+              title={page.metadata.title}
+              text={
+                page.metadata.perex
                   ? page.metadata.perex
                   : page.metadata.perex_e
                   ? truncate(page.metadata.perex_e)
                   : page.content
                   ? truncate(striptags(page.content))
-                  : null}
-              </div>
-              <div css={{ flexGrow: 1 }}></div>
-              <div
-                css={{
-                  padding: 10,
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  flexWrap: 'wrap',
-                }}
-              >
-                <span
-                  css={{
-                    color: '#a2a2a2',
-                    textAlign: 'left',
-                    display: 'inline-block',
-                  }}
-                >
+                  : null
+              }
+              caption={
+                <>
                   {dateFilter(page.metadata.published, 'D. M. YYYY')} napsal
                   {page.metadata.author.gender === 'F' ? 'a' : ''}{' '}
                   {page.metadata.author.name}
-                </span>
-                <a
-                  style={{
-                    textAlign: 'right',
-                  }}
-                  href={`/${page.file}`}
-                >
-                  Číst&nbsp;dál
-                </a>
-              </div>
-            </div>
+                </>
+              }
+            />
           ))}
         </div>
         <Paginator metadata={metadata} file={file} config={config} />
@@ -183,3 +115,87 @@ export function List({ subtags, tag, content, metadata, file, config }) {
     </div>
   )
 }
+
+function Card({ file, image, title, text, caption }) {
+  return (
+    <div
+      css={{
+        '@media (min-width: 37.56rem)': {
+          width: 'calc(50% - 0.75rem)',
+        },
+        '@media (min-width: 62rem)': {
+          width: 'calc(33.3333% - 0.75rem)',
+        },
+        margin: '10px 0',
+        overflow: 'hidden',
+        textAlign: 'justify',
+        backgroundColor: 'white',
+        boxShadow:
+          '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <a href={`/${file}`}>
+        <div
+          css={{
+            height: 120,
+            backgroundColor: '#0288d1',
+            backgroundImage: image
+              ? `url('${relURL(image, file)}')`
+              : undefined,
+            backgroundSize: 'cover',
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: '50% 50%',
+          }}
+        ></div>
+      </a>
+      <div
+        css={css`
+          margin: 10px 0;
+          height: 50px;
+        `}
+      >
+        <a href={`/${file}`}>
+          <h5
+            css={{
+              textAlign: 'center',
+              fontSize: '1.3rem',
+              margin: '0 10px',
+            }}
+          >
+            {title}
+          </h5>
+        </a>
+      </div>
+      <div css={{ padding: '0px 10px' }}>{text}</div>
+      <div css={{ flexGrow: 1 }}></div>
+      <div
+        css={{
+          padding: 10,
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }}
+      >
+        <span
+          css={{
+            color: '#a2a2a2',
+            textAlign: 'left',
+            display: 'inline-block',
+          }}
+        >
+          {caption}
+        </span>
+        <a
+          style={{
+            textAlign: 'right',
+          }}
+          href={`/${file}`}
+        >
+          Číst&nbsp;dál
+        </a>
+      </div>
+    </div>
+  )
+}