fix(ArticleDetail): revise variable name

thematters · Jan 11, 2024 · fbec1c7 · fbec1c7
1 parent 5dfa72b
commit fbec1c7
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 16 deletions.
diff --git a/src/components/ArticleDigest/AuthorSidebar/index.tsx b/src/components/ArticleDigest/AuthorSidebar/index.tsx
@@ -15,7 +15,7 @@ export type ArticleDigestAuthorSidebarProps = {
   collectionId?: string
   titleTextSize?: ArticleDigestTitleTextSize
   titleColor?: 'greyDarker' | 'black'
-  imageSize?: 44 | 64
+  imageSize?: 'sm' | 'md'
 }
 
 const fragments = {
@@ -39,15 +39,15 @@ export const ArticleDigestAuthorSidebar = ({
 
   titleTextSize = 'mdS',
   titleColor = 'greyDarker',
-  imageSize = 44,
+  imageSize = 'sm',
 }: ArticleDigestAuthorSidebarProps) => {
   const { articleState: state } = article
   const isBanned = state === 'banned'
   const cover = !isBanned ? article.cover : null
   const containerClasses = classNames({
     [styles.container]: true,
     [styles.hasCover]: !!cover,
-    [styles[`imageSize${imageSize}`]]: !!cover,
+    [styles[`imageSize${capitalizeFirstLetter(imageSize)}`]]: !!cover,
   })
   const path = toPath({
     page: 'articleDetail',
@@ -60,6 +60,7 @@ export const ArticleDigestAuthorSidebar = ({
     [styles[`lineHeight${capitalizeFirstLetter(titleTextSize)}`]]:
       !!titleTextSize,
   })
+  const imgSize = imageSize === 'sm' ? 44 : 64
 
   return (
     <section
@@ -81,8 +82,8 @@ export const ArticleDigestAuthorSidebar = ({
           <aside className={styles.cover}>
             <ResponsiveImage
               url={cover}
-              width={imageSize}
-              height={imageSize}
+              width={imgSize}
+              height={imgSize}
               disableAnimation={true}
             />
           </aside>

diff --git a/src/components/ArticleDigest/AuthorSidebar/styles.module.css b/src/components/ArticleDigest/AuthorSidebar/styles.module.css
@@ -35,7 +35,7 @@
   &.hasCover {
     position: relative;
 
-    &.imageSize44 {
+    &.imageSizeSm {
       min-height: 2.75rem;
       padding-right: calc(2.75rem + var(--spacing-loose));
 
@@ -45,7 +45,7 @@
       }
     }
 
-    &.imageSize64 {
+    &.imageSizeMd {
       min-height: 4rem;
       padding-right: calc(4rem + var(--spacing-loose));
 

diff --git a/src/components/CollectionDigest/AuthorSidebar/index.tsx b/src/components/CollectionDigest/AuthorSidebar/index.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import gql from 'graphql-tag'
 
-import { toPath } from '~/common/utils'
+import { capitalizeFirstLetter, toPath } from '~/common/utils'
 import {
   IconDraft24,
   LinkWrapper,
@@ -14,7 +14,7 @@ import styles from './styles.module.css'
 
 export type CollectionDigestAuthorSidebarProps = {
   collection: CollectionDigestAuthorSidebarCollectionFragment
-  imageSize?: 64
+  imageSize?: 'md'
 }
 
 const fragments = {
@@ -36,7 +36,7 @@ const fragments = {
 
 export const CollectionDigestAuthorSidebar = ({
   collection,
-  imageSize = 64,
+  imageSize = 'md',
 }: CollectionDigestAuthorSidebarProps) => {
   const {
     title,
@@ -48,7 +48,7 @@ export const CollectionDigestAuthorSidebar = ({
   const containerClasses = classNames({
     [styles.container]: true,
     [styles.hasCover]: !!cover,
-    [styles[`imageSize${imageSize}`]]: !!cover,
+    [styles[`imageSize${capitalizeFirstLetter(imageSize)}`]]: !!cover,
   })
 
   const path = toPath({
@@ -57,6 +57,8 @@ export const CollectionDigestAuthorSidebar = ({
     userName: userName || '',
   })
 
+  const imgSize = 64
+
   return (
     <section className={containerClasses}>
       <header>
@@ -67,8 +69,8 @@ export const CollectionDigestAuthorSidebar = ({
           <aside className={styles.cover}>
             <ResponsiveImage
               url={cover}
-              width={64}
-              height={64}
+              width={imgSize}
+              height={imgSize}
               disableAnimation={true}
             />
             <div className={styles.count}>

diff --git a/src/components/CollectionDigest/AuthorSidebar/styles.module.css b/src/components/CollectionDigest/AuthorSidebar/styles.module.css
@@ -12,7 +12,7 @@
   &.hasCover {
     position: relative;
 
-    &.imageSize64 {
+    &.imageSizeMd {
       min-height: 4rem;
       padding-right: calc(4rem + var(--spacing-loose));
 

diff --git a/src/views/ArticleDetail/AuthorSidebar/FromAuthor/index.tsx b/src/views/ArticleDetail/AuthorSidebar/FromAuthor/index.tsx
@@ -52,7 +52,7 @@ export const FromAuthor = ({ article }: FromAuthorProps) => {
                 article={work}
                 titleColor="black"
                 titleTextSize="md"
-                imageSize={64}
+                imageSize="md"
               />
             )}
             {work.__typename === 'Collection' && (

diff --git a/src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx b/src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx
@@ -45,7 +45,7 @@ export const RelatedArticles = ({ article }: RelatedArticlesProps) => {
               article={node}
               titleColor="black"
               titleTextSize="md"
-              imageSize={64}
+              imageSize="md"
             />
           </List.Item>
         ))}