Skip to content

Commit 09fa434

Browse files
maslianokmaslianok
committed
telegram/whatsapp integrations
1 parent 53e91d4 commit 09fa434

File tree

11 files changed

+176
-23
lines changed

11 files changed

+176
-23
lines changed

‎app/components/country-ranking-section.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import { FlameIcon } from 'lucide-react';
2-
31
import { CountryCard } from '@/components/country-card/country-card';
4-
import { Badge } from '@/components/ui/badge';
52
import { fetchCountrySummaries } from '@/graphql/helpers/fetch-country-summaries';
63

74
import { CountryRankingLink } from './country-ranking-link';
@@ -11,13 +8,7 @@ export const CountryRankingSection = async () => {
118

129
return (
1310
<div className="flex flex-col gap-4 grow py-8">
14-
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-2">
15-
Country Rankings
16-
<Badge variant="secondary" className="bg-blue-500 text-white dark:bg-blue-600">
17-
<FlameIcon />
18-
NEW
19-
</Badge>
20-
</h2>
11+
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-2">Country Rankings</h2>
2112
<div>
2213
Curious how you rank at home? Explore country-specific leaderboards to see the top developers in your nation,
2314
track your own standing, and celebrate local talent as it rises on the global stage.

‎app/components/messenger-integration-section.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { FaWhatsapp } from 'react-icons/fa';
2+
import { FaTelegramPlane } from 'react-icons/fa';
3+
4+
import { NewBadge } from '@/components/new-badge/new-badge';
5+
import { Button } from '@/components/ui/button';
6+
7+
export const MessengerIntegrationSection = () => {
8+
return (
9+
<div className="flex flex-col gap-4 grow py-8">
10+
<h2 className="text-2xl md:text-3xl font-semibold flex items-center gap-2">
11+
Get Rank Updates
12+
<NewBadge />
13+
</h2>
14+
<div>
15+
Stay updated on your GitHub profile&apos;s rank — daily or weekly, right in your favorite messaging app.
16+
</div>
17+
<div className="flex gap-4">
18+
<Button asChild variant="outline" size="sm">
19+
<a
20+
className="flex items-center gap-2"
21+
href="https://wa.me/15551234567?text=%2Fmenu"
22+
target="_blank"
23+
rel="noopener"
24+
>
25+
<FaWhatsapp />
26+
WhatsApp bot
27+
</a>
28+
</Button>
29+
30+
<Button asChild variant="outline" size="sm">
31+
<a className="flex items-center gap-2" href="https://t.me/gitranksbot" target="_blank" rel="noopener">
32+
<FaTelegramPlane />
33+
Telegram bot
34+
</a>
35+
</Button>
36+
</div>
37+
</div>
38+
);
39+
};

‎app/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Page } from '@/components/page/page';
44
import { BadgeSection } from './components/badge-section';
55
import { CountryRankingSection } from './components/country-ranking-section';
66
import { GlobalRankingSection } from './components/global-ranking-section';
7+
import { MessengerIntegrationSection } from './components/messenger-integration-section';
78
import { SearchProfile } from './components/search-profiile';
89
import MainImage from './main-image';
910

@@ -30,6 +31,7 @@ export default function Home() {
3031
<Page className="gap-4">
3132
<GlobalRankingSection />
3233
<CountryRankingSection />
34+
<MessengerIntegrationSection />
3335
<BadgeSection />
3436
</Page>
3537
</>

‎app/profile/[login]/components/layout-left-column.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FC, ReactNode } from 'react';
77
import { Avatar, AvatarImage } from '@/components/ui/avatar';
88
import { Button } from '@/components/ui/button';
99
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
10+
import { cn } from '@/lib/utils';
1011
import { ProfileSummaryQuery } from '@/types/generated/graphql';
1112
import { ensureLinkProtocol } from '@/utils/ensure-link-protocol';
1213

@@ -37,7 +38,7 @@ export const LayoutLeftColumn: FC<LayoutLeftColumnProps> = ({ user, children, cl
3738
}
3839

3940
return (
40-
<PageContainer className={className}>
41+
<PageContainer>
4142
<LeftColumnContainer>
4243
<AvatarAndNameContainer>
4344
<AvatarContainer>
@@ -124,7 +125,7 @@ export const LayoutLeftColumn: FC<LayoutLeftColumnProps> = ({ user, children, cl
124125
)}
125126
</DetailsContainer>
126127
</LeftColumnContainer>
127-
{children}
128+
<div className={cn('flex flex-col gap-4 w-full', className)}>{children}</div>
128129
</PageContainer>
129130
);
130131
};

‎app/profile/[login]/components/messenger-integration.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { FC } from 'react';
2+
import { FaWhatsapp } from 'react-icons/fa';
3+
import { FaTelegramPlane } from 'react-icons/fa';
4+
5+
import { Link as LinkUnderlined } from '@/components/link/link';
6+
import { NewBadge } from '@/components/new-badge/new-badge';
7+
8+
type LayoutLeftColumnProps = Readonly<{
9+
login: string;
10+
}>;
11+
12+
export const MessengerIntegration: FC<LayoutLeftColumnProps> = ({ login }) => {
13+
return (
14+
<div className="flex items-center gap-2 flex-wrap text-sm justify-between px-4 py-4 rounded-xl border-1">
15+
<div className="flex items-center gap-2">
16+
<NewBadge /> Subscribe to {login}’s GitHub rank updates in your messenger
17+
</div>
18+
<div className="flex items-center gap-4">
19+
<LinkUnderlined
20+
className="flex items-center gap-2"
21+
href="https://wa.me/48730654976?text=%2Fmenu"
22+
target="_blank"
23+
rel="noopener"
24+
>
25+
<FaWhatsapp />
26+
WhatsApp
27+
</LinkUnderlined>
28+
<LinkUnderlined
29+
className="flex items-center gap-2"
30+
href="https://t.me/gitranksbot"
31+
target="_blank"
32+
rel="noopener"
33+
>
34+
<FaTelegramPlane />
35+
Telegram
36+
</LinkUnderlined>
37+
</div>
38+
</div>
39+
);
40+
};

‎app/profile/[login]/page.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { unstable_cacheLife as cacheLife, unstable_cacheTag as cacheTag } from '
55
import { notFound } from 'next/navigation';
66

77
import { LayoutLeftColumn } from './components/layout-left-column';
8+
import { MessengerIntegration } from './components/messenger-integration';
89
import { ProfileCardsGrid } from './components/profile-card';
910
import { ProfileTimeline } from './components/profile-timeline';
1011
import { RanksOverview } from './components/ranks-overview';
@@ -49,8 +50,9 @@ export default async function Profile({ params }: { params: Promise<{ login: str
4950
}
5051

5152
return (
52-
<LayoutLeftColumn user={user}>
53-
<div className="flex-grow flex flex-col gap-6">
53+
<LayoutLeftColumn user={user} className="gap-6">
54+
<>
55+
<MessengerIntegration login={user.login} />
5456
<ProfileCardsGrid>
5557
<RanksOverview title="Global Ranks" ranksData={user.rankGlobal} detailsLink={`/profile/${login}/ranks`} />
5658
{user.rankCountry && (
@@ -72,7 +74,7 @@ export default async function Profile({ params }: { params: Promise<{ login: str
7274
<div>
7375
<ProfileTimeline timeline={user.timeline} firstSeenAt={user.firstSeenAt} />
7476
</div>
75-
</div>
77+
</>
7678
</LayoutLeftColumn>
7779
);
7880
}

‎app/profile/[login]/ranks/country/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ export default async function ProfileRanks({ params }: { params: Promise<{ login
2626
if (!user.country) {
2727
return (
2828
<LayoutLeftColumn user={user}>
29-
<div className="flex flex-col gap-4">
29+
<>
3030
<ProfileRankingSwitcher login={login} ranking="country" />
3131
<div className="text-muted-foreground">
3232
No country data found. To show up in country rankings, add a{' '}
3333
<Link href="/countries/stars/1">country name</Link> to your GitHub profile’s location and hit Refresh.
3434
</div>
35-
</div>
35+
</>
3636
</LayoutLeftColumn>
3737
);
3838
}
@@ -44,7 +44,7 @@ export default async function ProfileRanks({ params }: { params: Promise<{ login
4444

4545
return (
4646
<LayoutLeftColumn user={user}>
47-
<div className="flex flex-col gap-4">
47+
<>
4848
<ProfileRankingSwitcher login={login} ranking="country" />
4949
<ProfileCardsGrid>
5050
<RankCard
@@ -80,7 +80,7 @@ export default async function ProfileRanks({ params }: { params: Promise<{ login
8080
usersCount={usersCount}
8181
/>
8282
</ProfileCardsGrid>
83-
</div>
83+
</>
8484
</LayoutLeftColumn>
8585
);
8686
}

‎app/profile/[login]/ranks/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default async function ProfileRanks({ params }: { params: Promise<{ login
3131

3232
return (
3333
<LayoutLeftColumn user={user}>
34-
<div className="flex flex-col gap-4">
34+
<>
3535
<ProfileRankingSwitcher login={login} ranking="global" />
3636
<ProfileCardsGrid>
3737
<RankCard
@@ -84,7 +84,7 @@ export default async function ProfileRanks({ params }: { params: Promise<{ login
8484
User ranks show how a user compare to other GitHub users across different metrics — like repository stars,
8585
contribution activity, and more. Ranks are recalculated daily.
8686
</div> */}
87-
</div>
87+
</>
8888
</LayoutLeftColumn>
8989
);
9090
}

‎app/profile/[login]/repositories/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ export default async function ProfileRepositories({ params }: { params: Promise<
2323

2424
return (
2525
<LayoutLeftColumn user={user}>
26-
<div className="flex flex-col gap-4 w-full">
26+
<>
2727
<UserRepositoriesList repositories={repositories} login={login} repositoriesCount={repositoriesCount} />
2828
<UserContriutionsList contributions={contributions} login={login} />
29-
</div>
29+
</>
3030
</LayoutLeftColumn>
3131
);
3232
}

‎components/new-badge/new-badge.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { FlameIcon } from 'lucide-react';
2+
3+
import { Badge } from '../ui/badge';
4+
5+
export const NewBadge = () => {
6+
return (
7+
<Badge variant="secondary" className="bg-blue-500 text-white dark:bg-blue-600">
8+
<FlameIcon />
9+
NEW
10+
</Badge>
11+
);
12+
};

0 commit comments

Comments
 (0)