refacto in smaller components

eleven-labs · Oct 27, 2023 · d6173ff · d6173ff
1 parent 19d1945
commit d6173ff
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 55 deletions.
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
@@ -1,10 +1,9 @@
-import './PostPreview.scss';
-
-import { AsProps, Box, BoxProps, Heading, Link, Skeleton, Text } from '@eleven-labs/design-system';
-import classNames from 'classnames';
+import { AsProps, BoxProps } from '@eleven-labs/design-system';
 import React from 'react';
 
-import { SeparatorCircle } from '@/components';
+import PostPreviewCard from './PostPreviewCard';
+import PostPreviewContent from './PostPreviewContent';
+import PostPreviewFooter from './PostPreviewFooter';
 
 export type PostPreviewOptions = {
   title?: React.ReactNode;
@@ -34,55 +33,23 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   isLoading = false,
   isHighlighted = true,
   image,
-  ...boxProps
+  // ...boxProps ??
 }) => (
-  <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
-    {isHighlighted && (
-      <>
-        <div className="sparkle" />
-        <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
-      </>
-    )}
-    <Box
-      as="article"
-      className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
-      {...boxProps}
-    >
-      <Skeleton isLoading={isLoading}>
-        <Heading as="h2" color="amaranth" size="s" mb={{ xs: 'xxs-3', md: 'xxs' }}>
-          {hasMask ? (
-            title
-          ) : (
-            <Link {...link} data-internal-link={isRelated ? 'relatedPost' : 'post'}>
-              {title}
-            </Link>
-          )}
-        </Heading>
-      </Skeleton>
-      <Skeleton isLoading={isLoading} style={{ height: 75 }}>
-        <Text size="s" className="post-preview__excerpt">
-          {excerpt}
-        </Text>
-      </Skeleton>
-      <Box mt={{ xs: 'xs', md: 's' }} textSize="xs">
-        <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
-          {date && <Text as="span">{date}</Text>}
-        </Skeleton>
-        <SeparatorCircle />
-        <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 50 }}>
-          {readingTime && <Text as="span">{readingTime}</Text>}
-        </Skeleton>
-        <SeparatorCircle />
-        <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
-          {authors &&
-            authors.map((author, authorIndex) => (
-              <Text key={author.username} as="span">
-                {author.name}
-                {authorIndex !== authors.length - 1 ? ' & ' : ''}
-              </Text>
-            ))}
-        </Skeleton>
-      </Box>
-    </Box>
-  </Box>
+  <PostPreviewCard
+    isHighlighted={isHighlighted}
+    image={image}
+    hasMask={hasMask}
+    isRelated={isRelated}
+    // boxProps={boxProps} ??
+  >
+    <PostPreviewContent
+      isLoading={isLoading}
+      isRelated={isRelated}
+      title={title}
+      link={link}
+      excerpt={excerpt}
+      hasMask={hasMask}
+    />
+    <PostPreviewFooter isLoading={isLoading} date={date} readingTime={readingTime} authors={authors} />
+  </PostPreviewCard>
 );
diff --git a/src/components/PostPreview/PostPreviewCard.tsx b/src/components/PostPreview/PostPreviewCard.tsx
@@ -0,0 +1,52 @@
+import './PostPreview.scss';
+
+import { Box } from '@eleven-labs/design-system';
+import classNames from 'classnames';
+import React from 'react';
+import { PropsWithChildren } from 'react';
+
+import { PostPreviewProps } from './PostPreview';
+
+const PostPreviewCard = ({
+  isHighlighted,
+  image,
+  hasMask,
+  isRelated,
+  // boxProps,
+  children,
+}: Partial<PostPreviewProps> & PropsWithChildren): React.ReactNode => {
+  if (isHighlighted) {
+    return (
+      <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
+        {isHighlighted && (
+          <>
+            <div className="sparkle" />
+            <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+          </>
+        )}
+        <Box
+          as="article"
+          className={classNames(
+            'post-preview',
+            { 'post-preview--mask': hasMask },
+            { 'post-preview--related': isRelated }
+          )}
+          // {...boxProps}
+        >
+          {children}
+        </Box>
+      </Box>
+    );
+  }
+  return (
+    <Box
+      as="article"
+      className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}
+      // {...boxProps}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default PostPreviewCard;
diff --git a/src/components/PostPreview/PostPreviewContent.tsx b/src/components/PostPreview/PostPreviewContent.tsx
@@ -0,0 +1,38 @@
+import './PostPreview.scss';
+
+import { Heading, Link, Skeleton, Text } from '@eleven-labs/design-system';
+import React from 'react';
+
+import { PostPreviewOptions } from './PostPreview';
+
+const PostPreviewContent = ({
+  isLoading,
+  hasMask,
+  title,
+  link,
+  isRelated,
+  excerpt,
+}: Partial<PostPreviewOptions>): React.ReactNode => {
+  return (
+    <>
+      <Skeleton isLoading={isLoading}>
+        <Heading as="h2" color="amaranth" size="s" mb={{ xs: 'xxs-3', md: 'xxs' }}>
+          {hasMask ? (
+            title
+          ) : (
+            <Link {...link} data-internal-link={isRelated ? 'relatedPost' : 'post'}>
+              {title}
+            </Link>
+          )}
+        </Heading>
+      </Skeleton>
+      <Skeleton isLoading={isLoading} style={{ height: 75 }}>
+        <Text size="s" className="post-preview__excerpt">
+          {excerpt}
+        </Text>
+      </Skeleton>
+    </>
+  );
+};
+
+export default PostPreviewContent;
diff --git a/src/components/PostPreview/PostPreviewFooter.tsx b/src/components/PostPreview/PostPreviewFooter.tsx
@@ -0,0 +1,30 @@
+import { Box, Skeleton, Text } from '@eleven-labs/design-system';
+import React from 'react';
+
+import { PostPreviewOptions, SeparatorCircle } from '@/components';
+
+const PostPreviewFooter = ({ isLoading, date, readingTime, authors }: Partial<PostPreviewOptions>): React.ReactNode => {
+  return (
+    <Box mt={{ xs: 'xs', md: 's' }} textSize="xs">
+      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
+        {date && <Text as="span">{date}</Text>}
+      </Skeleton>
+      <SeparatorCircle />
+      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 50 }}>
+        {readingTime && <Text as="span">{readingTime}</Text>}
+      </Skeleton>
+      <SeparatorCircle />
+      <Skeleton isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
+        {authors &&
+          authors.map((author, authorIndex) => (
+            <Text key={author.username} as="span">
+              {author.name}
+              {authorIndex !== authors.length - 1 ? ' & ' : ''}
+            </Text>
+          ))}
+      </Skeleton>
+    </Box>
+  );
+};
+
+export default PostPreviewFooter;