Skip to content

Commit f7b92ff

Browse files
committed
made entire box clickable
Signed-off-by: kishore08-07 <kishorebsm8@gmail.com>
1 parent d786825 commit f7b92ff

3 files changed

Lines changed: 72 additions & 79 deletions

File tree

src/sections/Kanvas/FeaturesSection/Collaborate/CollaboratorFeatures.js

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -36,35 +36,33 @@ export default function CollaboratorFeatures({ features }) {
3636
<img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
3737
</div>
3838
</div>
39-
</Link>
40-
<div className="g-grid-container contentContainer" id="add-border">
41-
<Link to="/cloud-native-management/kanvas/collaborate">
39+
<div className="g-grid-container contentContainer" id="add-border">
4240
<div className="diagram scroll hideInMobile">
4341
<CollaboratorFeaturesDiagram activeExampleIndex={activeExampleIndex} />
4442
</div>
45-
</Link>
46-
<ul className="features collaborator-features">
47-
{features.map((feature, index) => (
48-
<li className="collaborator-feature-slide" key={index}>
49-
<Feature
50-
{...feature}
51-
onInViewStatusChanged={(state) => {
52-
const newStatusArray = [...viewportStatus];
53-
newStatusArray[index] = state;
54-
setViewportStatus(newStatusArray);
55-
// Calculate the first element in focus, set that as
56-
// our new activeExampleIndex. If it's been updated
57-
// notify the subscriber.
58-
const newExampleIndex = newStatusArray.lastIndexOf(true);
59-
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
60-
setActiveExampleIndex(newExampleIndex);
61-
}
62-
}}
63-
/>
64-
</li>
65-
))}
66-
</ul>
67-
</div>
43+
<ul className="features collaborator-features">
44+
{features.map((feature, index) => (
45+
<li className="collaborator-feature-slide" key={index}>
46+
<Feature
47+
{...feature}
48+
onInViewStatusChanged={(state) => {
49+
const newStatusArray = [...viewportStatus];
50+
newStatusArray[index] = state;
51+
setViewportStatus(newStatusArray);
52+
// Calculate the first element in focus, set that as
53+
// our new activeExampleIndex. If it's been updated
54+
// notify the subscriber.
55+
const newExampleIndex = newStatusArray.lastIndexOf(true);
56+
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
57+
setActiveExampleIndex(newExampleIndex);
58+
}
59+
}}
60+
/>
61+
</li>
62+
))}
63+
</ul>
64+
</div>
65+
</Link>
6866
</div>
6967
</Container>
7068
</CollaboratorFeaturesWrapper>

src/sections/Kanvas/FeaturesSection/Design/DesignerFeatures.js

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,35 +37,33 @@ export default function DesignerFeatures({ features }) {
3737
<img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
3838
</div>
3939
</div>
40-
</Link>
41-
<div className="g-grid-container contentContainer" id="add-border" >
42-
<Link to="/cloud-native-management/kanvas/design">
40+
<div className="g-grid-container contentContainer" id="add-border" >
4341
<div className="diagram scroll hideInMobile">
4442
<DesignerFeaturesDiagram activeExampleIndex={activeExampleIndex} />
4543
</div>
46-
</Link>
47-
<ul className="features design-features">
48-
{features.map((feature, index) => (
49-
<li className="design-feature-slide" key={index}>
50-
<Feature
51-
{...feature}
52-
onInViewStatusChanged={(state) => {
53-
const newStatusArray = [...viewportStatus];
54-
newStatusArray[index] = state;
55-
setViewportStatus(newStatusArray);
56-
// Calculate the first element in focus, set that as
57-
// our new activeExampleIndex. If it's been updated
58-
// notify the subscriber.
59-
const newExampleIndex = newStatusArray.lastIndexOf(true);
60-
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
61-
setActiveExampleIndex(newExampleIndex);
62-
}
63-
}}
64-
/>
65-
</li>
66-
))}
67-
</ul>
68-
</div>
44+
<ul className="features design-features">
45+
{features.map((feature, index) => (
46+
<li className="design-feature-slide" key={index}>
47+
<Feature
48+
{...feature}
49+
onInViewStatusChanged={(state) => {
50+
const newStatusArray = [...viewportStatus];
51+
newStatusArray[index] = state;
52+
setViewportStatus(newStatusArray);
53+
// Calculate the first element in focus, set that as
54+
// our new activeExampleIndex. If it's been updated
55+
// notify the subscriber.
56+
const newExampleIndex = newStatusArray.lastIndexOf(true);
57+
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
58+
setActiveExampleIndex(newExampleIndex);
59+
}
60+
}}
61+
/>
62+
</li>
63+
))}
64+
</ul>
65+
</div>
66+
</Link>
6967
</div>
7068
</Container>
7169
</DesignerFeaturesWrapper>

src/sections/Kanvas/FeaturesSection/Visualize/VisualizerFeatures.js

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -38,36 +38,33 @@ export default function VisualizerFeatures({ features }) {
3838
<img src={cursorOverArrow ? LinkArrow : LinkArrowDark} alt="Learn more" style={{ maxWidth: "15%" }} className={cursorOverArrow ? "arrow-enter" : "arrow"} />
3939
</div>
4040
</div>
41-
</Link>
42-
<div className="g-grid-container contentContainer" id="add-border">
43-
<Link to="/cloud-native-management/kanvas/operate">
41+
<div className="g-grid-container contentContainer" id="add-border">
4442
<div className="diagram scroll hideInMobile">
4543
<VisualizerFeaturesDiagram activeExampleIndex={activeExampleIndex} />
4644
</div>
47-
</Link>
48-
<ul className="visualizer-features">
49-
{features.map((feature, index) => (
50-
<li className="visualizer-feature-slide" key={index}>
51-
<Feature
52-
{...feature}
53-
onInViewStatusChanged={(state) => {
54-
const newStatusArray = [...viewportStatus];
55-
newStatusArray[index] = state;
56-
setViewportStatus(newStatusArray);
57-
// Calculate the first element in focus, set that as
58-
// our new activeExampleIndex. If it's been updated
59-
// notify the subscriber.
60-
const newExampleIndex = newStatusArray.lastIndexOf(true);
61-
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
62-
setActiveExampleIndex(newExampleIndex);
63-
}
64-
}}
65-
/>
66-
</li>
67-
))}
68-
</ul>
69-
70-
</div>
45+
<ul className="visualizer-features">
46+
{features.map((feature, index) => (
47+
<li className="visualizer-feature-slide" key={index}>
48+
<Feature
49+
{...feature}
50+
onInViewStatusChanged={(state) => {
51+
const newStatusArray = [...viewportStatus];
52+
newStatusArray[index] = state;
53+
setViewportStatus(newStatusArray);
54+
// Calculate the first element in focus, set that as
55+
// our new activeExampleIndex. If it's been updated
56+
// notify the subscriber.
57+
const newExampleIndex = newStatusArray.lastIndexOf(true);
58+
if (activeExampleIndex !== newExampleIndex && newExampleIndex !== -1) {
59+
setActiveExampleIndex(newExampleIndex);
60+
}
61+
}}
62+
/>
63+
</li>
64+
))}
65+
</ul>
66+
</div>
67+
</Link>
7168
</div>
7269
</Container>
7370
</VisualizerFeaturesWrapper>

0 commit comments

Comments
 (0)