Skip to content

Commit 8984c92

Browse files
pcarapic15pcarapic15
committed
Add static table for sdv in numbers section
1 parent dfe143a commit 8984c92

File tree

3 files changed

+194
-7
lines changed

3 files changed

+194
-7
lines changed

‎src/components/Footer.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
import React from "react";
2-
32
import Img from "gatsby-image";
4-
53
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
64
import {
75
faSlack,
86
faTwitter,
97
faLinkedin,
108
} from "@fortawesome/free-brands-svg-icons";
11-
129
import { Link, StaticQuery, graphql } from "gatsby";
1310

1411
export default function Footer() {
@@ -83,7 +80,7 @@ export default function Footer() {
8380
{ name: "Blog", url: "https://datacebo.com/blog" },
8481
].map((i, idx) => {
8582
return (
86-
<li className="mb-4">
83+
<li className="mb-4" key={idx}>
8784
<a
8885
className="opacity-80 hover:opacity-100 text-white hover:underline"
8986
href={i.url}
@@ -112,7 +109,7 @@ export default function Footer() {
112109
},
113110
].map((i, idx) => {
114111
return (
115-
<li className="mb-4">
112+
<li className="mb-4" key={idx}>
116113
<a
117114
className="opacity-80 hover:opacity-100 text-white hover:underline"
118115
href={i.url}

‎src/components/common/table/TableRowCell.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22

33
export default function TableRowCell({ children }) {
44
return (
5-
<div className="py-5 pl-6 pr-8 font-normal text-[19px] text-midnight-700 leading-none">
5+
<div className="py-5 pl-6 pr-8 font-normal text-lg text-midnight-700 leading-none">
66
{children}
77
</div>
88
);

‎src/components/community-stats/SdvInNumbersSection.js

Lines changed: 191 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,73 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect, useRef } from "react";
2+
import Table from "../common/table/Table";
3+
import TableHeader from "../common/table/TableHeader";
4+
import TableHeaderCell from "../common/table/TableHeaderCell";
5+
import TableBody from "../common/table/TableBody";
6+
import TableRow from "../common/table/TableRow";
7+
import TableRowCell from "../common/table/TableRowCell";
28
import Tab from "../common/Tab";
9+
import useWindowWidth from "../../hooks/useviewport";
310

411
export default function SdvInNumbersSection() {
12+
const metricKeys = ["toDate", "monthly", "yearToDate"];
13+
const metricLabels = ["To date", "Monthly", "Year to date"];
14+
const [tableColDimensions, setTableColDimensions] = useState(
15+
"minmax(204px, 204px) minmax(181px, 348px) minmax(181px, 348px) minmax(181px, 348px)"
16+
);
17+
const data = [
18+
{ name: "SDV", toDate: "8M", monthly: "131K", yearToDate: "10M" },
19+
{ name: "Gretle", toDate: "998K", monthly: "16K", yearToDate: "1M" },
20+
{ name: "Synthesized", toDate: "269K", monthly: "4K", yearToDate: "323K" },
21+
{ name: "YData", toDate: "221K", monthly: "3K", yearToDate: "405K" },
22+
{ name: "SynthCity", toDate: "84K", monthly: "1,413", yearToDate: "106K" },
23+
{
24+
name: "Realtabformer",
25+
toDate: "78K",
26+
monthly: "1,304",
27+
yearToDate: "97K",
28+
},
29+
{ name: "Datomize", toDate: "73K", monthly: "1,216", yearToDate: "81K" },
30+
{
31+
name: "Smartnoise",
32+
toDate: "68K",
33+
monthly: "1,134",
34+
yearToDate: "92K",
35+
},
36+
{ name: "Be-great", toDate: "66K", monthly: "1,101", yearToDate: "90K" },
37+
{ name: "Mostly-AI", toDate: "22K", monthly: "373", yearToDate: "62K" },
38+
];
39+
const width = useWindowWidth();
40+
const isMobile = width < 768;
41+
42+
const [activeMetricIndex, setActiveMetricIndex] = useState(0);
43+
const touchStartX = useRef(null);
44+
45+
useEffect(() => {
46+
setTableColDimensions(
47+
isMobile
48+
? "minmax(204px, 204px) minmax(181px, 348px)"
49+
: "minmax(204px, 204px) minmax(181px, 348px) minmax(181px, 348px) minmax(181px, 348px)"
50+
);
51+
}, [isMobile]);
52+
53+
const handleSwipeStart = (e) => {
54+
touchStartX.current = e.touches[0].clientX;
55+
};
56+
57+
const handleSwipeMove = (e) => {
58+
if (touchStartX.current === null) return;
59+
const deltaX = e.touches[0].clientX - touchStartX.current;
60+
const threshold = 50;
61+
62+
if (deltaX > threshold) {
63+
setActiveMetricIndex((prev) => Math.max(prev - 1, 0));
64+
touchStartX.current = null;
65+
} else if (deltaX < -threshold) {
66+
setActiveMetricIndex((prev) => Math.min(prev + 1, metricKeys.length - 1));
67+
touchStartX.current = null;
68+
}
69+
};
70+
571
const [tabs, setTabs] = useState([
672
{ label: "Downloads", isActive: true },
773
{ label: "Users", isActive: false },
@@ -42,6 +108,130 @@ export default function SdvInNumbersSection() {
42108
</Tab>
43109
))}
44110
</div>
111+
<Table tableColDimensions={tableColDimensions}>
112+
<TableHeader>
113+
<div className="relative">
114+
<TableHeaderCell />
115+
116+
{isMobile && (
117+
<div className="absolute right-0 top-0 h-full w-6 z-50 pointer-events-none">
118+
<div
119+
className="h-full w-full"
120+
style={{
121+
background:
122+
"linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.01) 100%)",
123+
boxShadow: "7px 0px 20px -10px rgba(0, 0, 54, 0.14)",
124+
}}
125+
/>
126+
</div>
127+
)}
128+
</div>
129+
{isMobile ? (
130+
<div
131+
onTouchStart={handleSwipeStart}
132+
onTouchMove={handleSwipeMove}
133+
className="touch-pan-x w-full"
134+
>
135+
<TableHeaderCell>
136+
{metricLabels[activeMetricIndex]}
137+
</TableHeaderCell>
138+
</div>
139+
) : (
140+
<>
141+
<TableHeaderCell>To date</TableHeaderCell>
142+
<TableHeaderCell>Monthly</TableHeaderCell>
143+
<TableHeaderCell>Year to date</TableHeaderCell>
144+
</>
145+
)}
146+
</TableHeader>
147+
148+
<TableBody>
149+
{data.map((row, idx) => {
150+
const isLast = idx === data.length - 1;
151+
152+
return (
153+
<TableRow key={row.name} index={idx} isLast={isLast}>
154+
<div className="relative">
155+
<TableRowCell>
156+
<div className="flex font-semibold text-midnight-950">
157+
{row.name}
158+
</div>
159+
</TableRowCell>
160+
161+
{isMobile && (
162+
<div className="absolute right-0 top-0 h-full w-6 z-50 pointer-events-none">
163+
<div
164+
className="h-full w-full"
165+
style={{
166+
background:
167+
"linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.01) 100%)",
168+
boxShadow:
169+
"7px 0px 20px -10px rgba(0, 0, 54, 0.14)",
170+
}}
171+
/>
172+
</div>
173+
)}
174+
</div>
175+
{isMobile ? (
176+
<div
177+
onTouchStart={handleSwipeStart}
178+
onTouchMove={handleSwipeMove}
179+
className="w-full touch-pan-x"
180+
>
181+
<TableRowCell>
182+
<div
183+
className={`flex justify-end ${
184+
isLast
185+
? "font-bold text-midnight-950"
186+
: "font-normal"
187+
}`}
188+
>
189+
{row[metricKeys[activeMetricIndex]]}
190+
</div>
191+
</TableRowCell>
192+
</div>
193+
) : (
194+
<>
195+
<TableRowCell>
196+
<div
197+
className={`flex justify-end ${
198+
isLast
199+
? "font-bold text-midnight-950"
200+
: "font-normal"
201+
}`}
202+
>
203+
{row.toDate}
204+
</div>
205+
</TableRowCell>
206+
<TableRowCell>
207+
<div
208+
className={`flex justify-end ${
209+
isLast
210+
? "font-bold text-midnight-950"
211+
: "font-normal"
212+
}`}
213+
>
214+
{row.monthly}
215+
</div>
216+
</TableRowCell>
217+
<TableRowCell>
218+
<div
219+
className={`flex justify-end ${
220+
isLast
221+
? "font-bold text-midnight-950"
222+
: "font-normal"
223+
}`}
224+
>
225+
{row.yearToDate}
226+
</div>
227+
</TableRowCell>
228+
</>
229+
)}
230+
</TableRow>
231+
);
232+
})}
233+
</TableBody>
234+
</Table>
45235
</div>
46236
</div>
47237
);

0 commit comments

Comments
 (0)