PageMeta and TagList mobile layout fix

src/components/PageMeta/index.tsx

@@ -1,8 +1,10 @@
 import './styles.css'
 
+import cx from 'classnames'
 import { dateFormat } from 'src/lib/date'
 import { ITag } from 'src/types'
-import { TagList } from '../TagList'
+import { TagList, Direction } from '../TagList'
+import { useMobile } from 'src/hooks/useMobile'
 
 export type PageMetaProps = {
     style?: React.CSSProperties
@@ -10,14 +12,23 @@ export type PageMetaProps = {
     tags?: ITag[]
 }
 
-export const PageMeta: React.FC<PageMetaProps> = props => (
-    <header className={'pageMeta'} style={props.style}>
-        {!props.date ? null : (
-            <p className={'date'}>Опубликовано {dateFormat(props.date)}</p>
-        )}
+export const PageMeta: React.FC<PageMetaProps> = props => {
+    const mobile = useMobile()
+    const center = mobile ? null : 'center'
+    const direction: Direction = mobile ? 'vertical' : 'horizontal'
 
-        {!(props.tags?.length) ? null : (
-            <TagList items={props.tags} />
-        )}
-    </header>
-)
+    return (
+        <div className={cx('pageMeta', center)} style={props.style}>
+            {!props.date ? null : (
+                <p className={'date'}>Опубликовано {dateFormat(props.date)}</p>
+            )}
+
+            {!(props.tags?.length) ? null : (
+                <TagList
+                    direction={direction}
+                    items={props.tags}
+                />
+            )}
+        </div>
+    )
+}

src/components/PageMeta/styles.css

@@ -1,5 +1,8 @@
 .pageMeta {
     display: flex;
-    align-items: center;
     justify-content: space-between;
 }
+
+.pageMeta.center {
+    align-items: center;
+}

src/components/TagList/index.tsx

@@ -1,10 +1,18 @@
 import './styles.css'
 
+import cx from 'classnames'
 import { ITag } from 'src/types'
 import { Button } from '../Button'
 
-export const Tag: React.FC<{ href: string }> = props => (
-    <li className={'tagsItem'}>
+export type Direction = 'horizontal' | 'vertical'
+
+export type TagProps = {
+    href: string
+    direction: Direction
+}
+
+export const Tag: React.FC<TagProps> = props => (
+    <li className={cx('tagsItem', props.direction)}>
         <Button
             href={props.href}
             size={'small'}
@@ -17,14 +25,16 @@ export const Tag: React.FC<{ href: string }> = props => (
 
 export type TagListProps = {
     items: ITag[]
+    direction: Direction
 }
 
 export const TagList: React.FC<TagListProps> = props => (
-    <ul className={'tags'}>
+    <ul className={cx('tags', props.direction)}>
         {props.items.map(x => (
             <Tag
                 key={x.slug}
                 href={x.href}
+                direction={props.direction}
             >
                 {x.name}
             </Tag>

src/components/TagList/styles.css

@@ -8,10 +8,23 @@
     list-style: none;
 }
 
+.tags.vertical {
+    flex-direction: column;
+}
+
 .tagsItem {
     margin-right: var(--size-s);
+    margin-bottom: var(--size-s);
 }
 
 .tagsItem:last-child {
     margin-right: 0;
 }
+
+.tagsItem.vertical {
+    margin-bottom: var(--size-s);
+}
+
+.tagsItem.tags.vertical:last-child {
+    margin-bottom: 0;
+}