Skip to content

Commit 282226b

Browse files
chargomechargome
authored
feat(platform): Card component (#11851)
1 parent 772bda3 commit 282226b

File tree

2 files changed

+111
-115
lines changed

2 files changed

+111
-115
lines changed

‎src/components/card.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {StaticImageData} from 'next/dist/shared/lib/get-img-props';
2+
import Image from 'next/image';
3+
import Link from 'next/link';
4+
5+
export function Card({
6+
href,
7+
image,
8+
imageAlt,
9+
title,
10+
description,
11+
className = '',
12+
}: {
13+
description: string;
14+
href: string;
15+
image: string | StaticImageData;
16+
imageAlt: string;
17+
title: string;
18+
className?: string;
19+
}) {
20+
return (
21+
<Link href={href} className={className}>
22+
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
23+
<Image src={image} height={64} alt={imageAlt} className="object-contain" />
24+
<div className="flex flex-col justify-center space-y-2">
25+
<h3 className="text-xl font-medium">{title}</h3>
26+
<p>{description}</p>
27+
</div>
28+
</div>
29+
</Link>
30+
);
31+
}

‎src/components/home.tsx‎

Lines changed: 80 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Image from 'next/image';
2-
import Link from 'next/link';
32

43
import {Banner} from 'sentry-docs/components/banner';
54
import {SentryWordmarkLogo} from 'sentry-docs/components/wordmarkLogo';
@@ -15,6 +14,7 @@ import RocketImage from 'sentry-docs/imgs/rocket.png';
1514
import SecurityImage from 'sentry-docs/imgs/security.png';
1615
import SupportImage from 'sentry-docs/imgs/support.png';
1716

17+
import {Card} from './card';
1818
import {Header} from './header';
1919
import {NavLink, NavLinkProps} from './navlink';
2020
import {PlatformFilter} from './platformFilter';
@@ -60,123 +60,88 @@ export async function Home() {
6060
<PlatformFilter platforms={sortedPlatforms} />
6161
<h2 className="text-2xl mt-16 mb-6 font-medium">Get to know us</h2>
6262
<div className="flex flex-wrap gap-6">
63-
<Link href="/product/" className="w-full">
64-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4">
65-
<Image src={RocketImage} height={64} alt="Rocket image" />
66-
<div className="space-y-2">
67-
<h3 className="text-xl font-medium">What is Sentry?</h3>
68-
<p>
69-
Application monitoring and debugging software considered “not bad” by 4
70-
million developers.
71-
</p>
72-
</div>
73-
</div>
74-
</Link>
75-
<Link href="/organization" className="w-full md:w-[calc(50%-12px)]">
76-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
77-
<Image
78-
src={OrganizationImage}
79-
height={64}
80-
alt="Organization image"
81-
className="object-contain"
82-
/>
83-
<div className="flex flex-col justify-center space-y-2">
84-
<h3 className="text-xl font-medium">Organization settings</h3>
85-
<p>Information for setting up your organization’s Sentry account.</p>
86-
</div>
87-
</div>
88-
</Link>
89-
<Link href="/pricing" className="w-full md:w-[calc(50%-12px)]">
90-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
91-
<Image
92-
src={CalculatorImage}
93-
height={64}
94-
alt="Calculator image"
95-
className="object-contain"
96-
/>
97-
<div className="flex flex-col justify-center space-y-2">
98-
<h3 className="text-xl font-medium">Pricing & Billing</h3>
99-
<p>All about our pricing and billing structure.</p>
100-
</div>
101-
</div>
102-
</Link>
103-
<Link href="/api" className="w-full md:w-[calc(50%-12px)]">
104-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
105-
<Image
106-
src={PlugImage}
107-
height={64}
108-
alt="Plug image"
109-
className="object-contain"
110-
/>
111-
<div className="flex flex-col justify-center space-y-2">
112-
<h3 className="text-xl font-medium">API</h3>
113-
<p>APIs for accessing Sentry programmatically.</p>
114-
</div>
115-
</div>
116-
</Link>
117-
<Link href="/cli" className="w-full md:w-[calc(50%-12px)]">
118-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
119-
<Image
120-
src={TerminalImage}
121-
height={64}
122-
alt="Terminal image"
123-
className="object-contain"
124-
/>
125-
<div className="flex flex-col justify-center space-y-2">
126-
<h3 className="text-xl font-medium">CLI</h3>
127-
<p>How to use ‘sentry-cli’ on the command line.</p>
128-
</div>
129-
</div>
130-
</Link>
131-
<Link href="/security-legal-pii" className="w-full md:w-[calc(50%-12px)]">
132-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
133-
<Image
134-
src={SecurityImage}
135-
height={64}
136-
alt="Stamped paper image"
137-
className="object-contain"
138-
/>
139-
<div className="flex flex-col justify-center space-y-2">
140-
<h3 className="text-xl font-medium">Security, Legal & PII</h3>
141-
<p>Security, compliance, and data-scrubbing processes.</p>
142-
</div>
143-
</div>
144-
</Link>
145-
<Link href="/concepts" className="w-full md:w-[calc(50%-12px)]">
146-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
147-
<Image
148-
src={ConceptsImage}
149-
height={64}
150-
alt="Concept and references image"
151-
className="object-contain"
152-
/>
153-
<div className="flex flex-col justify-center space-y-2">
154-
<h3 className="text-xl font-medium">Concepts & Reference</h3>
155-
<p>Core concepts that make Sentry, Sentry.</p>
156-
</div>
157-
</div>
158-
</Link>
63+
<Card
64+
className="w-full"
65+
href="/product/"
66+
image={RocketImage}
67+
imageAlt="Rocket image"
68+
title="What is Sentry?"
69+
description="Application monitoring and debugging software considered “not bad” by 4 million developers."
70+
/>
71+
72+
<Card
73+
className="w-full md:w-[calc(50%-12px)]"
74+
href="/organization"
75+
image={OrganizationImage}
76+
imageAlt="Organization image"
77+
title="Organization settings"
78+
description="Information for setting up your organization's Sentry account."
79+
/>
80+
81+
<Card
82+
className="w-full md:w-[calc(50%-12px)]"
83+
href="/pricing"
84+
image={CalculatorImage}
85+
imageAlt="Calculator image"
86+
title="Pricing & Billing"
87+
description="All about our pricing and billing structure."
88+
/>
89+
90+
<Card
91+
className="w-full md:w-[calc(50%-12px)]"
92+
href="/api"
93+
image={PlugImage}
94+
imageAlt="Plug image"
95+
title="API"
96+
description="APIs for accessing Sentry programmatically."
97+
/>
98+
99+
<Card
100+
className="w-full md:w-[calc(50%-12px)]"
101+
href="/cli"
102+
image={TerminalImage}
103+
imageAlt="Terminal image"
104+
title="CLI"
105+
description="How to use ‘sentry-cli’ on the command line."
106+
/>
107+
108+
<Card
109+
className="w-full md:w-[calc(50%-12px)]"
110+
href="/security-legal-pii"
111+
image={SecurityImage}
112+
imageAlt="Stamped paper image"
113+
title="Security, Legal & PII"
114+
description="Security, compliance, and data-scrubbing processes."
115+
/>
116+
117+
<Card
118+
className="w-full md:w-[calc(50%-12px)]"
119+
href="/concepts"
120+
image={ConceptsImage}
121+
imageAlt="Concept and references image"
122+
title="Concepts & Reference"
123+
description="Core concepts that make Sentry, Sentry."
124+
/>
159125
</div>
160126
<h2 className="text-2xl mt-10 mb-6 font-medium">Talk to us</h2>
161127
<div className="flex flex-col md:flex-row gap-6">
162-
<Link href="https://discord.com/invite/sentry" className="w-full">
163-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
164-
<Image src={ChatBubble} height={64} alt="Chat bubble image" />
165-
<div className="space-y-2">
166-
<h3 className="text-xl font-medium">Sentry Discord</h3>
167-
<p>Real talk in real time. Get in it.</p>
168-
</div>
169-
</div>
170-
</Link>
171-
<Link href="https://sentry.zendesk.com/hc/en-us/" className="w-full">
172-
<div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
173-
<Image src={SupportImage} height={64} alt="Support image" />
174-
<div className="space-y-2">
175-
<h3 className="text-xl font-medium">Support</h3>
176-
<p>See how we can help.</p>
177-
</div>
178-
</div>
179-
</Link>
128+
<Card
129+
className="w-full"
130+
href="https://discord.com/invite/sentry"
131+
image={ChatBubble}
132+
imageAlt="Chat bubble image"
133+
title="Sentry Discord"
134+
description="Real talk in real time. Get in it."
135+
/>
136+
137+
<Card
138+
className="w-full"
139+
href="https://sentry.zendesk.com/hc/en-us/"
140+
image={SupportImage}
141+
imageAlt="Support image"
142+
title="Support"
143+
description="See how we can help."
144+
/>
180145
</div>
181146
</div>
182147
<footer className="mt-12 pb-10 w-full z-50 max-w-7xl mx-auto md:px-6 space-y-4 px-6 lg:px-8">

0 commit comments

Comments
 (0)