Skip to content

Commit 763ff55

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
authored
Merge branch 'master' into eslint-new-v9
2 parents 73a9e85 + 2c75864 commit 763ff55

1 file changed

Lines changed: 123 additions & 88 deletions

File tree

‎src/components/Inline-quotes/index.js‎

Lines changed: 123 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,163 @@
11
import React, { useState, useEffect } from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
33
import { useInView } from "react-intersection-observer";
44

5-
6-
75
const QuotesWrapper = styled.div`
6+
margin: 5% 0%;
7+
text-align: center;
8+
padding: 0 1rem;
89
9-
margin: 5% 0%;
10-
text-align: center;
11-
.quote-box {
10+
.quote-box {
1211
display: flex;
13-
flex-direction: row;
14-
flex: 1 1 0;
15-
text-align: center;
1612
align-items: center;
1713
padding: 2rem;
14+
gap: 1.5rem;
1815
border: 2px solid transparent;
19-
border-image: ${props => props.theme.DarkTheme ? "linear-gradient(to right bottom, #00b39f, #121212 80%)" : "linear-gradient(to right bottom, #00b39f, #fff 80%)"} ;
16+
border-image: linear-gradient(
17+
to right bottom,
18+
#00b39f,
19+
${props => props.theme.DarkTheme ? "#121212" : "#fff"} 80%
20+
);
2021
border-image-slice: 1 0 1 1;
21-
transition: border 0.2s ease-in-out;
22-
@media screen and (max-width: 500px) {
23-
flex-direction: column;
22+
transition: border-image 0.6s ease-in-out;
23+
24+
@media (max-width: 768px) {
25+
flex-direction: column;
26+
padding: 1.5rem 1rem;
27+
gap: 1rem;
2428
}
2529
26-
h4 {
27-
text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
28-
flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
29-
color: ${props => props.theme.primaryColor};
30-
font-weight: 100;
31-
font-style: italic;
32-
@media screen and (max-width: 600px) {
33-
font-size: 1rem;
34-
}
35-
@media screen and (max-width: 500px) {
36-
text-align: center;
37-
flex: 0 0 100%;
38-
}
30+
@media (max-width: 500px) {
31+
padding: 1rem 0.75rem;
3932
}
40-
}
33+
}
4134
42-
.border {
43-
border-image: ${props => props.theme.DarkTheme ? "linear-gradient(to left top, #00b39f, #121212 80%)" : "linear-gradient(to left top, #00b39f, #fff 80%)"} ;
35+
.border {
36+
border-image: linear-gradient(
37+
to left top,
38+
#00b39f,
39+
${props => props.theme.DarkTheme ? "#121212" : "#fff"} 80%
40+
);
4441
border-image-slice: 1 1 1 0;
45-
transition: 0.6s ease-in-out;
46-
}
47-
img{
48-
border-radius: 50%;
49-
width: 6vw;
50-
height: 6vw;
51-
object-fit: contain;
52-
@media screen and (max-width: 1300px) {
53-
height: 5rem;
54-
width: 5rem;
42+
}
43+
44+
h4 {
45+
flex: ${props => props.$onlyQuoteIsPresent ? "0 0 100%" : "0 0 65%"};
46+
margin: 0;
47+
color: ${props => props.theme.primaryColor};
48+
font-size: clamp(1rem, 2.5vw, 1.25rem);
49+
font-weight: 100;
50+
font-style: italic;
51+
line-height: 1.6;
52+
text-align: ${props => props.$onlyQuoteIsPresent ? "center" : "right"};
53+
54+
@media (max-width: 768px) {
55+
flex: 0 0 100%;
56+
text-align: center;
57+
line-height: 1.5;
5558
}
56-
}
59+
}
5760
58-
.quote-source {
61+
img {
62+
flex-shrink: 0;
63+
width: clamp(72px, 10vw, 96px);
64+
height: clamp(72px, 10vw, 96px);
65+
border-radius: 50%;
66+
object-fit: cover;
67+
}
68+
69+
.quote-source {
5970
display: flex;
6071
flex: 2 1 0;
61-
padding: 0 1rem;
6272
flex-direction: column;
63-
@media screen and (max-width: 500px) {
64-
text-align: center;
73+
justify-content: center;
74+
padding: 0 1rem;
75+
text-align: left;
76+
77+
@media (max-width: 768px) {
78+
padding: 0;
79+
text-align: center;
6580
}
6681
6782
h5 {
68-
font-weight: bold;
69-
70-
padding:0.1rem;
71-
text-transform: uppercase;
72-
@media screen and (max-width: 600px) {
73-
margin-top: 1rem;
74-
font-size: 1rem;
75-
}
83+
margin: 0 0 0.5rem 0;
84+
padding: 0.1rem;
85+
font-size: clamp(0.875rem, 2vw, 1rem);
86+
font-weight: bold;
87+
text-transform: uppercase;
7688
}
89+
7790
p {
78-
@media screen and (max-width: 600px) {
79-
font-size: 0.75rem;
80-
line-height: 1.25rem;
81-
}
91+
margin: 0;
92+
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
93+
line-height: 1.4;
94+
95+
@media (max-width: 500px) {
96+
line-height: 1.3;
97+
}
8298
}
83-
}
99+
}
84100
85-
hr {
101+
hr {
102+
align-self: stretch;
86103
height: 5rem;
87-
margin: 0% 3%;
88-
@media screen and (max-width: 500px) {
89-
margin: 5% 0%;
90-
height: 0;
91-
width: 40vw;
104+
margin: 0;
105+
border: none;
106+
border-left: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
107+
108+
@media (max-width: 768px) {
109+
width: clamp(150px, 60%, 200px);
110+
height: 0;
111+
margin: 0.5rem auto;
112+
border-left: none;
113+
border-top: 1px solid ${props => props.theme.DarkTheme ? "#444" : "#ddd"};
92114
}
93-
}
94-
`;
115+
}
95116
96-
const InlineQuotes = ({ person, title, quote,image }) => {
117+
.author-section {
118+
display: flex;
119+
align-items: center;
120+
gap: 1rem;
97121
98-
const [quoteRef, inView] = useInView({ threshold: 1.0 });
122+
@media (max-width: 768px) {
123+
flex-direction: column;
124+
gap: 0.75rem;
125+
}
126+
}
127+
`;
128+
129+
const InlineQuotes = ({ person, title, quote, image }) => {
130+
const [quoteRef, inView] = useInView({ threshold: 0.5, triggerOnce: false });
99131
const [quoteInView, setquoteInView] = useState(false);
132+
100133
useEffect(() => {
101-
if (inView && !quoteInView)
102-
setquoteInView(true);
103-
else if (quoteInView && !inView)
104-
setquoteInView(false);
105-
}, [inView, quoteInView]);
134+
setquoteInView(inView);
135+
}, [inView]);
136+
137+
const showAuthorSection = image || person || title;
106138

107139
return (
108-
<QuotesWrapper $onlyQuoteIsPresent={!(image || person || title)}>
140+
<QuotesWrapper $onlyQuoteIsPresent={!showAuthorSection}>
109141
<div className={quoteInView ? "quote-box border" : "quote-box"} ref={quoteRef}>
110142
<h4>❝ {quote} ❞</h4>
111-
{(image || person || title) && <hr />}
112-
{
113-
image &&
114-
<img
115-
src={image}
116-
alt={`${person || "Quote author"}`}
117-
width="96"
118-
height="96"
119-
style={{ objectFit: "cover" }}
120-
/>
121-
}
122-
<div className="quote-source">
123-
<h5>{person}</h5>
124-
<p>{title}</p>
125-
</div>
143+
{showAuthorSection && (
144+
<>
145+
<hr />
146+
<div className="author-section">
147+
{image && (
148+
<img
149+
src={image}
150+
alt={person || "Quote author"}
151+
loading="lazy"
152+
/>
153+
)}
154+
<div className="quote-source">
155+
{person && <h5>{person}</h5>}
156+
{title && <p>{title}</p>}
157+
</div>
158+
</div>
159+
</>
160+
)}
126161
</div>
127162
</QuotesWrapper>
128163
);

0 commit comments

Comments
 (0)