Speedometer/resources/newssite/news-next/src/components/article/article-content.jsx at 6db97351e9182b9b165ebacc87682a1cbda97c5d · lingyuncai/Speedometer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import { useMemo } from "react";
import { v4 as uuidv4 } from "uuid";
import classNames from "classnames";

import ArticleImage from "./article-image";
import ArticleText from "./article-text";

import styles from "news-site-css/dist/article.module.css";
import layoutStyles from "news-site-css/dist/layout.module.css";

export default function ArticleContent({ type, content, display }) {
    function createContentWithId(type, content) {
        return type !== "text" ? content.map((item) => ({ ...item, id: uuidv4() })) : content;
    }

    const contentWithId = useMemo(
        () => createContentWithId(type, content),
        [type, content]
    );

    if (type === "text") {
        return (
            <div className={styles["article-content"]}>
                <ArticleText text={content} />
            </div>
        );
    }

    if (type === "list") {
        return (
            <div className={styles["article-content"]}>
                <ul className={classNames(styles["article-list"], styles.vertical, { [styles[display]]: display })}>
                    {contentWithId.map((item) =>
                        <li key={item.id} className={styles["article-list-item"]}>
                            {item.url && !item.title
                                ? <a href={item.url}>
                                    <ArticleText text={item.content} />
                                </a>
                                : <ArticleText text={item.content} />
                            }
                        </li>
                    )}
                </ul>
            </div>
        );
    }

    if (type === "articles-list") {
        return (
            <div className={styles["article-list-content"]}>
                <ul className={classNames(styles["article-list"], styles.vertical)}>
                    {contentWithId.map((item) =>
                        <li key={item.id} className={styles["article-list-item"]}>
                            <ArticleText textClass={classNames(styles["article-title"], "truncate-multiline", "truncate-multiline-3")} text={item.title} type="h3" />
                            {item.url && !item.title
                                ? <a href={item.url}>
                                    <ArticleText text={item.content} />
                                </a>
                                : <ArticleText text={item.content} />
                            }
                        </li>
                    )}
                </ul>
            </div>
        );
    }

    if (type === "excerpt") {
        return (
            <ul className={classNames(styles["article-list"], styles.horizontal)}>
                {contentWithId.map((item) =>
                    <li key={item.id} className={styles["article-list-item"]}>
                        <ArticleImage imageClass={styles["article-hero"]} image={item.image} />
                        <div className={styles["article-content"]}>
                            <ArticleText textClass="truncate-multiline truncate-multiline-3" text={item.text} type="div" />
                        </div>
                    </li>
                )}
            </ul>
        );
    }

    if (type === "grid") {
        return (
            <div className={classNames(layoutStyles["grid-container"], { [layoutStyles[display]]: display })}>
                {contentWithId.map((item) =>
                    <div key={item.id} className={layoutStyles["grid-item"]}>
                        <ArticleImage imageClass={styles["article-image-container"]} image={item.image} meta={item.meta} />

                        {item.url
                            ? <a href={item.url}>
                                <ArticleText textClass={classNames(styles["article-content"], "truncate-multiline", "truncate-multiline-3")} text={item.text} type="h3" />
                            </a>
                            : <ArticleText textClass={classNames(styles["article-content"], "truncate-multiline", "truncate-multiline-3")} text={item.text} type="h3" />
                        }
                    </div>
                )}
            </div>
        );
    }

    if (type === "preview") {
        return (
            <ul className={classNames(styles["article-list"], styles.vertical)}>
                {contentWithId.map((item) =>
                    <li key={item.id} className={styles["article-list-item"]}>
                        <ArticleImage imageClass={styles["article-image-container"]} image={item.image} />
                        <ArticleText textClass={classNames(styles["article-title"], "truncate-multiline", "truncate-multiline-3")} text={item.title} type="h3" />
                    </li>
                )}
            </ul>
        );
    }

    return null;
}