1
- import { v4 as uuidv4 } from "uuid" ;
2
1
import classNames from "classnames" ;
3
2
4
3
import ArticleImage from "./article-image" ;
@@ -21,7 +20,7 @@ export default function ArticleContent({ type, content, display }) {
21
20
< div className = { styles [ "article-content" ] } >
22
21
< ul className = { classNames ( styles [ "article-list" ] , styles . vertical , { [ styles [ display ] ] : display } ) } >
23
22
{ content . map ( ( item ) =>
24
- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
23
+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
25
24
{ item . url && ! item . title
26
25
? < a href = { item . url } >
27
26
< ArticleText text = { item . content } />
@@ -40,7 +39,7 @@ export default function ArticleContent({ type, content, display }) {
40
39
< div className = { styles [ "article-list-content" ] } >
41
40
< ul className = { classNames ( styles [ "article-list" ] , styles . vertical ) } >
42
41
{ content . map ( ( item ) =>
43
- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
42
+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
44
43
< ArticleText textClass = { classNames ( styles [ "article-title" ] , "truncate-multiline" , "truncate-multiline-3" ) } text = { item . title } type = "h3" />
45
44
{ item . url && ! item . title
46
45
? < a href = { item . url } >
@@ -59,7 +58,7 @@ export default function ArticleContent({ type, content, display }) {
59
58
return (
60
59
< ul className = { classNames ( styles [ "article-list" ] , styles . horizontal ) } >
61
60
{ content . map ( ( item ) =>
62
- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
61
+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
63
62
< ArticleImage imageClass = { styles [ "article-hero" ] } image = { item . image } />
64
63
< div className = { styles [ "article-content" ] } >
65
64
< ArticleText textClass = "truncate-multiline truncate-multiline-3" text = { item . text } type = "div" />
@@ -74,7 +73,7 @@ export default function ArticleContent({ type, content, display }) {
74
73
return (
75
74
< div className = { classNames ( layoutStyles [ "grid-container" ] , { [ layoutStyles [ display ] ] : display } ) } >
76
75
{ content . map ( ( item ) =>
77
- < div key = { uuidv4 ( ) } className = { layoutStyles [ "grid-item" ] } >
76
+ < div key = { item . id } className = { layoutStyles [ "grid-item" ] } >
78
77
< ArticleImage imageClass = { styles [ "article-image-container" ] } image = { item . image } meta = { item . meta } />
79
78
80
79
{ item . url
@@ -93,7 +92,7 @@ export default function ArticleContent({ type, content, display }) {
93
92
return (
94
93
< ul className = { classNames ( styles [ "article-list" ] , styles . vertical ) } >
95
94
{ content . map ( ( item ) =>
96
- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
95
+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
97
96
< ArticleImage imageClass = { styles [ "article-image-container" ] } image = { item . image } />
98
97
< ArticleText textClass = { classNames ( styles [ "article-title" ] , "truncate-multiline" , "truncate-multiline-3" ) } text = { item . title } type = "h3" />
99
98
</ li >
0 commit comments