irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/team-details.js
168 lines6.0 KBJavaScript
RawDownloadHistory
1import Layout from "@/components/layout/Layout";
2import Brand3 from "@/components/sections/Brand3";
3import Link from "next/link";
4
5function emailToLink(email) {
6 return `mailto:${email}`;
7}
8
9function phoneToLink(phone) {
10 return `tel:${phone}`;
11}
12
13function SkillBar({ title, value }) {
14 return (
15 <div className="progress-item">
16 <h5 className="title">{title}</h5>
17 <div className="progress">
18 <div
19 className="progress-bar"
20 role="progressbar"
21 style={{ width: `${value}%` }}
22 aria-valuenow={value}
23 aria-valuemin={0}
24 aria-valuemax={100}
25 />
26 <span>{value}%</span>
27 </div>
28 </div>
29 );
30}
31
32export default function TeamDetails(props) {
33 const leadingParagraphs = props.paragraphs.slice(
34 0,
35 props.paragraphs.length - 1
36 );
37 const trailingParagraph = props.paragraphs[props.paragraphs.length - 1];
38 return (
39 <>
40 <Layout breadcrumbTitle={props.name}>
41 <div>
42 <section className="team-details-area pt-120 pb-120">
43 <div className="container">
44 <div className="row align-items-center">
45 <div className="col-lg-6">
46 <div className="team-details-thumb">
47 <img src="/assets/img/team/team_details01.jpg" alt="" />
48 </div>
49 </div>
50 <div className="col-lg-6">
51 <div className="team-details-info">
52 <div className="info-content-top">
53 <h3 className="title">{props.name}</h3>
54 <span>{props.position}</span>
55 </div>
56 <ul className="list-wrap team-info">
57 <li>
58 <span>
59 <i className="fas fa-toolbox" />
60 Experience:
61 </span>
62 {props.exp}
63 </li>
64 <li>
65 <span>
66 <i className="fas fa-envelope" />
67 E-mail:
68 </span>
69 <Link href={emailToLink(props.email)}>
70 {props.email}
71 </Link>
72 </li>
73 <li>
74 <span>
75 <i className="fas fa-phone-alt" />
76 Phone:
77 </span>
78 <Link href={phoneToLink(props.phone)}>
79 {props.phone}
80 </Link>
81 </li>
82 <li>
83 <span>
84 <i className="fas fa-map-marker-alt" />
85 Location:
86 </span>
87 {props.location}
88 </li>
89 </ul>
90 <div className="team-details-social">
91 <h6 className="title">Follow Me:</h6>
92 <ul className="list-wrap">
93 <li>
94 <Link href="#">
95 <i className="fab fa-facebook-f" />
96 </Link>
97 </li>
98 <li>
99 <Link href="#">
100 <i className="fab fa-twitter" />
101 </Link>
102 </li>
103 <li>
104 <Link href="#">
105 <i className="fab fa-linkedin-in" />
106 </Link>
107 </li>
108 <li>
109 <Link href="#">
110 <i className="fab fa-instagram" />
111 </Link>
112 </li>
113 </ul>
114 </div>
115 </div>
116 </div>
117 </div>
118 <div className="row">
119 <div className="col-lg-12">
120 <div className="team-details-content">
121 <h3 className="title">Personal Experience and Skills</h3>
122 {leadingParagraphs.map((paragraph, index) => (
123 <p className="info-one" key={`paragraph-${index}`}>
124 {paragraph}
125 </p>
126 ))}
127 <p className="info-two">{trailingParagraph}</p>
128 <div className="progress-wrap">
129 {props.skills.map((skill, index) => (
130 <SkillBar key={`skill-${index}`} {...skill} />
131 ))}
132 </div>
133 <div className="guidelines-wrap">
134 <div className="row">
135 <div className="col-lg-6">
136 <div className="guidelines-img">
137 <img
138 src="/assets/img/team/team_details02.jpg"
139 alt=""
140 />
141 </div>
142 </div>
143 <div className="col-lg-6">
144 <div className="guidelines-content">
145 <h4 className="title">{props.sidenote.title}</h4>
146 <p>{props.sidenote.content}</p>
147 <ul className="list-wrap">
148 {props.sidenote.quotes.map((quote, index) => (
149 <li key={`quote-${index}`}>{quote}</li>
150 ))}
151 </ul>
152 </div>
153 </div>
154 </div>
155 </div>
156 </div>
157 </div>
158 </div>
159 </div>
160 </section>
161 {/* team-details-area-end */}
162 {/* brand-area */}
163 <Brand3 />
164 </div>
165 </Layout>
166 </>
167 );
168}