contributor-spotlight/src/Components/Featured-contributor/FeaturedContributor.jsx at 727210166b3d03ce02068eb2885a9535098544eb · jenkins-infra/contributor-spotlight · 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
117
118
119
120
121
122
123
import React from 'react';
import { motion } from 'framer-motion';
import { Calendar, GitCommitHorizontal, MapPin } from 'lucide-react';
import './featured-contributor.css';
import { Link, graphql, useStaticQuery } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';

const FeaturedContributor = ({ contributor, darkmode }) => {
    const data = useStaticQuery(graphql`
        query FeaturedContributorImagesQuery {
            allFile(
                filter: {
                    sourceInstanceName: { eq: "images" }
                    extension: { in: ["jpg", "jpeg", "png", "webp", "avif"] }
                }
            ) {
                nodes {
                    relativePath
                    childImageSharp {
                        gatsbyImageData(width: 500, placeholder: BLURRED)
                    }
                }
            }
        }
    `);

    if (!contributor) return null;

    const pageAttributes = contributor?.node?.pageAttributes;
    const { name, image, location, datepublished, intro, firstcommit } =
        pageAttributes || {};
    const normalizeImagePath = (value) =>
        (value || '').replace(/^\//, '').replace(/^static\//, '');
    const normalizedPath = normalizeImagePath(image);
    const matchedImageNode = data.allFile.nodes.find(
        (node) => node.relativePath === normalizedPath
    );
    const optimizedImageData = getImage(matchedImageNode);
    const fallbackImageSrc = image;
    const slug = contributor?.node?.fields?.slug;
    return (
        <motion.div
            className={`featured-contributor-section ${
                darkmode ? 'dark' : 'light'
            }`}
        >
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                style={{ cursor: 'pointer' }}
            >
                <Link to={slug} className='featured-contributor-card'>
                    <motion.div
                        className='featured-image'
                        initial={{ scale: 0.9, opacity: 0 }}
                        animate={{ scale: 1, opacity: 1 }}
                        transition={{ delay: 0.2, duration: 0.4 }}
                        whileHover={{ scale: 1.02 }}
                    >
                        {optimizedImageData ? (
                            <GatsbyImage
                                image={optimizedImageData}
                                alt={name}
                            />
                        ) : (
                            <img src={fallbackImageSrc} alt={name} />
                        )}
                    </motion.div>

                    <div className='featured-content'>
                        <motion.h2
                            className='featured-name'
                            initial={{ opacity: 0, x: -20 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ delay: 0.3 }}
                        >
                            {name}
                        </motion.h2>

                        <motion.div
                            className='featured-role'
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.4 }}
                        >
                            <span className='meta-item'>
                                <MapPin size={16} />
                                <strong>Location:</strong> {location}
                            </span>

                            <span className='meta-item'>
                                <Calendar size={12} />
                                <strong>Date Published:</strong> {datepublished}
                            </span>
                            <span className='meta-item'>
                                <GitCommitHorizontal size={12} />
                                <strong>First Commit:</strong> {firstcommit}
                            </span>
                        </motion.div>

                        <motion.div
                            className='featured-highlight'
                            initial={{ opacity: 0, y: 10 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.5 }}
                            whileHover={{
                                x: 5,
                                transition: { type: 'spring', stiffness: 300 },
                            }}
                        >
                            <p className='featured-intro'>
                                <strong>{name}</strong> {intro}
                            </p>
                        </motion.div>
                    </div>
                </Link>
            </motion.div>
        </motion.div>
    );
};

export default FeaturedContributor;