Skip to content

Commit a58ff4e

Browse files
shining-bluemoon-11shining-bluemoon-11
committed
resolve conversation
1 parent b2c8854 commit a58ff4e

File tree

4 files changed

+24
-33
lines changed

4 files changed

+24
-33
lines changed

‎frontend/src/components/TitleWithIcon.tsx‎ renamed to ‎frontend/src/components/AnchorTitle.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { IconProp } from '@fortawesome/fontawesome-svg-core'
1+
import { faLink } from '@fortawesome/free-solid-svg-icons'
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import React from 'react'
44

5-
interface TitleWithIconProps {
5+
interface AnchorTitleProps {
66
href: string
7-
icon: IconProp
87
title: string
98
}
109

11-
const TitleWithIcon: React.FC<TitleWithIconProps> = ({ href, icon, title }) => {
10+
const AnchorTitle: React.FC<AnchorTitleProps> = ({ href, title }) => {
1211
const id = href.replace('#', '')
1312

1413
const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -28,11 +27,11 @@ const TitleWithIcon: React.FC<TitleWithIconProps> = ({ href, icon, title }) => {
2827
className="inherit-color ml-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
2928
onClick={handleClick}
3029
>
31-
<FontAwesomeIcon icon={icon} className="h-7 w-5" />
30+
<FontAwesomeIcon icon={faLink} className="h-7 w-5" />
3231
</a>
3332
</div>
3433
</div>
3534
)
3635
}
3736

38-
export default TitleWithIcon
37+
export default AnchorTitle

‎frontend/src/components/CardDetailsPage.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { faCalendar, faFileCode, faLink, faTag } from '@fortawesome/free-solid-svg-icons'
1+
import { faCalendar, faFileCode, faTag } from '@fortawesome/free-solid-svg-icons'
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import { DetailsCardProps } from 'types/card'
44
import { formatDate } from 'utils/dateFormatter'
55
import { getSocialIcon } from 'utils/urlIconMappings'
6+
import AnchorTitle from 'components/AnchorTitle'
67
import ChapterMap from 'components/ChapterMap'
78
import InfoBlock from 'components/InfoBlock'
89
import ItemCardList from 'components/ItemCardList'
910
import RepositoriesCard from 'components/RepositoriesCard'
1011
import SecondaryCard from 'components/SecondaryCard'
11-
import TitleWithIcon from 'components/TitleWithIcon'
1212
import ToggleableList from 'components/ToggleableList'
1313
import TopContributors from 'components/ToggleContributors'
1414

@@ -39,16 +39,15 @@ const DetailsCard = ({
3939
{!is_active && (
4040
<span className="ml-2 rounded bg-red-200 px-2 py-1 text-sm text-red-800">Inactive</span>
4141
)}
42-
<SecondaryCard title={<TitleWithIcon href="#summary" icon={faLink} title="Summary" />}>
42+
<SecondaryCard title={<AnchorTitle href="#summary" title="Summary" />}>
4343
<p>{summary}</p>
4444
</SecondaryCard>
4545

4646
<div className="grid grid-cols-1 gap-6 md:grid-cols-7">
4747
<SecondaryCard
4848
title={
49-
<TitleWithIcon
49+
<AnchorTitle
5050
href={`#${type}-details`}
51-
icon={faLink}
5251
title={`${type[0].toUpperCase() + type.slice(1)} Details`}
5352
/>
5453
}
@@ -66,7 +65,7 @@ const DetailsCard = ({
6665
</SecondaryCard>
6766
{(type === 'project' || type === 'repository' || type === 'committee') && (
6867
<SecondaryCard
69-
title={<TitleWithIcon href="#statistics" icon={faLink} title="Statistics" />}
68+
title={<AnchorTitle href="#statistics" title="Statistics" />}
7069
className="md:col-span-2"
7170
>
7271
{stats.map((stat, index) => (
@@ -97,13 +96,13 @@ const DetailsCard = ({
9796
{languages.length !== 0 && (
9897
<ToggleableList
9998
items={languages}
100-
label={<TitleWithIcon href="#languages" icon={faLink} title="Languages" />}
99+
label={<AnchorTitle href="#languages" title="Languages" />}
101100
/>
102101
)}
103102
{topics.length !== 0 && (
104103
<ToggleableList
105104
items={topics}
106-
label={<TitleWithIcon href="#topics" icon={faLink} title="Topics" />}
105+
label={<AnchorTitle href="#topics" title="Topics" />}
107106
/>
108107
)}
109108
</div>
@@ -114,7 +113,7 @@ const DetailsCard = ({
114113
{(type === 'project' || type === 'repository') && (
115114
<>
116115
<ItemCardList
117-
title={<TitleWithIcon href="#recent-issues" icon={faLink} title="Recent Issues" />}
116+
title={<AnchorTitle href="#recent-issues" title="Recent Issues" />}
118117
data={recentIssues}
119118
renderDetails={(item) => (
120119
<div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
@@ -126,9 +125,7 @@ const DetailsCard = ({
126125
)}
127126
/>
128127
<ItemCardList
129-
title={
130-
<TitleWithIcon href="#recent-releases" icon={faLink} title="Recent Releases" />
131-
}
128+
title={<AnchorTitle href="#recent-releases" title="Recent Releases" />}
132129
data={recentReleases}
133130
renderDetails={(item) => (
134131
<div className="mt-2 flex items-center text-sm text-gray-600 dark:text-gray-400">
@@ -143,7 +140,7 @@ const DetailsCard = ({
143140
)}
144141
{type === 'project' && repositories.length > 0 && (
145142
<SecondaryCard
146-
title={<TitleWithIcon href="#repositories" icon={faLink} title="Repositories" />}
143+
title={<AnchorTitle href="#repositories" title="Repositories" />}
147144
className="mt-6"
148145
>
149146
<RepositoriesCard repositories={repositories} />

‎frontend/src/components/ToggleContributors.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Button } from '@chakra-ui/react'
2-
import { faChevronDown, faChevronUp, faLink } from '@fortawesome/free-solid-svg-icons'
2+
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
44
import { useState } from 'react'
55
import { useNavigate } from 'react-router-dom'
66
import { TopContributorsTypeGraphql } from 'types/contributor'
7-
import TitleWithIcon from 'components/TitleWithIcon'
7+
import AnchorTitle from 'components/AnchorTitle'
88

99
const TopContributors = ({
1010
contributors,
@@ -31,7 +31,7 @@ const TopContributors = ({
3131
}
3232
return (
3333
<div className={`mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800 ${className}`}>
34-
<TitleWithIcon href="#top-contributors" icon={faLink} title={label} />
34+
<AnchorTitle href="#top-contributors" title={label} />
3535
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
3636
{displayContributors.map((contributor, index) => (
3737
<div

‎frontend/src/pages/Home.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
faCalendar,
66
faCode,
77
faFileCode,
8-
faLink,
98
faMapMarkerAlt,
109
faTag,
1110
} from '@fortawesome/free-solid-svg-icons'
@@ -18,13 +17,13 @@ import { AlgoliaResponseType } from 'types/algolia'
1817
import { ChapterTypeAlgolia } from 'types/chapter'
1918
import { MainPageData } from 'types/home'
2019
import { formatDate } from 'utils/dateFormatter'
20+
import AnchorTitle from 'components/AnchorTitle'
2121
import AnimatedCounter from 'components/AnimatedCounter'
2222
import ChapterMap from 'components/ChapterMap'
2323
import ItemCardList from 'components/ItemCardList'
2424
import LoadingSpinner from 'components/LoadingSpinner'
2525
import MultiSearchBar from 'components/MultiSearch'
2626
import SecondaryCard from 'components/SecondaryCard'
27-
import TitleWithIcon from 'components/TitleWithIcon'
2827
import TopContributors from 'components/ToggleContributors'
2928

3029
export default function Home() {
@@ -129,9 +128,7 @@ export default function Home() {
129128
</div>
130129
</div>
131130
<div className="grid gap-4 md:grid-cols-2">
132-
<SecondaryCard
133-
title={<TitleWithIcon href="#new-chapters" icon={faLink} title="New Chapters" />}
134-
>
131+
<SecondaryCard title={<AnchorTitle href="#new-chapters" title="New Chapters" />}>
135132
<div className="space-y-4">
136133
{data.recentChapters.map((chapter) => (
137134
<div key={chapter.key} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -154,9 +151,7 @@ export default function Home() {
154151
))}
155152
</div>
156153
</SecondaryCard>
157-
<SecondaryCard
158-
title={<TitleWithIcon href="#new-Projects" icon={faLink} title="New Projects" />}
159-
>
154+
<SecondaryCard title={<AnchorTitle href="#new-Projects" title="New Projects" />}>
160155
<div className="space-y-4">
161156
{data.recentProjects.map((project) => (
162157
<div key={project.key} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -185,15 +180,15 @@ export default function Home() {
185180
</div>
186181
<TopContributors contributors={data.topContributors} maxInitialDisplay={9} />
187182
<div className="mb-20">
188-
<TitleWithIcon href="#chapters-nearby" icon={faLink} title="OWASP Chapters Nearby" />
183+
<AnchorTitle href="#chapters-nearby" title="OWASP Chapters Nearby" />
189184
<ChapterMap
190185
geoLocData={geoLocData}
191186
style={{ height: '400px', width: '100%', zIndex: '0' }}
192187
/>
193188
</div>
194189
<div className="grid gap-4 md:grid-cols-2">
195190
<ItemCardList
196-
title={<TitleWithIcon href="#recent-issues" icon={faLink} title="Recent Issues" />}
191+
title={<AnchorTitle href="#recent-issues" title="Recent Issues" />}
197192
data={data.recentIssues}
198193
renderDetails={(item) => (
199194
<div className="mt-2 flex flex-shrink-0 items-center text-sm text-gray-600 dark:text-gray-300">
@@ -205,7 +200,7 @@ export default function Home() {
205200
)}
206201
/>
207202
<ItemCardList
208-
title={<TitleWithIcon href="#recent-releases" icon={faLink} title="Recent Releases" />}
203+
title={<AnchorTitle href="#recent-releases" title="Recent Releases" />}
209204
data={data.recentReleases}
210205
renderDetails={(item) => (
211206
<div className="mt-2 flex flex-shrink-0 text-sm text-gray-600 dark:text-gray-300">

0 commit comments

Comments
 (0)