mirror of https://github.com/waku-org/metrics.git
Merge pull request #15 from hackyguru/master
UI, Discord token and graphs
This commit is contained in:
Guru
GitHub
commit
08b907bdf7
|
|
@ -1,4 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import './globals.css'
|
||||
import { Inter } from 'next/font/google'
|
||||
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata = {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,122 @@
|
|||
import React from "react";
|
||||
import OverviewCard from "@/components/molecules/OverviewCard";
|
||||
import { AreaChart } from '@tremor/react';
|
||||
import { BarChart } from '@tremor/react';
|
||||
import { BarList, Card } from '@tremor/react';
|
||||
|
||||
|
||||
|
||||
export default function Overview(props) {
|
||||
|
||||
console.log(props.saves)
|
||||
const data = [
|
||||
{
|
||||
name: 'Node operator',
|
||||
value: 456,
|
||||
href: 'https://twitter.com/tremorlabs',
|
||||
icon: function TwitterIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2.5 fill-blue-500"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Hacker',
|
||||
value: 351,
|
||||
href: 'https://google.com',
|
||||
icon: function GoogleIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2.5 fill-slate-500"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M3.064 7.51A9.996 9.996 0 0 1 12 2c2.695 0 4.959.99 6.69 2.605l-2.867 2.868C14.786 6.482 13.468 5.977 12 5.977c-2.605 0-4.81 1.76-5.595 4.123-.2.6-.314 1.24-.314 1.9 0 .66.114 1.3.314 1.9.786 2.364 2.99 4.123 5.595 4.123 1.345 0 2.49-.355 3.386-.955a4.6 4.6 0 0 0 1.996-3.018H12v-3.868h9.418c.118.654.182 1.336.182 2.045 0 3.046-1.09 5.61-2.982 7.35C16.964 21.105 14.7 22 12 22A9.996 9.996 0 0 1 2 12c0-1.614.386-3.14 1.064-4.49z" />
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Lurker',
|
||||
value: 271,
|
||||
href: 'https://github.com/tremorlabs/tremor',
|
||||
icon: function GitHubIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2.5 fill-slate-900"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z" />
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'IFT CC',
|
||||
value: 191,
|
||||
href: 'https://reddit.com',
|
||||
icon: function RedditIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2.5 fill-orange-500"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm6.67-10a1.46 1.46 0 0 0-2.47-1 7.12 7.12 0 0 0-3.85-1.23L13 6.65l2.14.45a1 1 0 1 0 .13-.61L12.82 6a.31.31 0 0 0-.37.24l-.74 3.47a7.14 7.14 0 0 0-3.9 1.23 1.46 1.46 0 1 0-1.61 2.39 2.87 2.87 0 0 0 0 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 0 0 0-.44 1.46 1.46 0 0 0 .81-1.33zm-10 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5.81 2.75a3.84 3.84 0 0 1-2.47.77 3.84 3.84 0 0 1-2.47-.77.27.27 0 0 1 .38-.38A3.27 3.27 0 0 0 12 16a3.28 3.28 0 0 0 2.09-.61.28.28 0 1 1 .39.4v-.04zm-.18-1.71a1 1 0 1 1 1-1 1 1 0 0 1-1.01 1.04l.01-.04z" />
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Partner',
|
||||
value: 91,
|
||||
href: 'https://www.youtube.com/@tremorlabs3079',
|
||||
icon: function YouTubeIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2.5 fill-red-500"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z" />
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const dataFormatter = (number) =>
|
||||
`${Intl.NumberFormat('us').format(number).toString()}`;
|
||||
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-2xl">Overview</h1>
|
||||
<h1 className="text-[#707071] hidden md:block">Powered by Waku</h1>
|
||||
<h1 className="text-[#707071] hidden md:block">Waku.org</h1>
|
||||
</div>
|
||||
|
||||
<div className="md:flex flex-wrap md:space-x-5 space-y-5 md:space-y-0 mt-10 justify-between">
|
||||
|
|
@ -99,10 +209,10 @@ export default function Overview(props) {
|
|||
<div className="md:flex justify-between md:space-x-10 mt-10 space-y-10 md:space-y-0">
|
||||
<div
|
||||
id="communitymetricsbox"
|
||||
className="md:w-1/2 border-[#202021] hover:border-white border-4 rounded-lg p-6"
|
||||
className="md:w-1/2 border-[#202021] hover:border-white border p-6"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-xl">Community metrics</h1>
|
||||
<h1 className="text-xl">Discord growth</h1>
|
||||
<svg
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 16 16"
|
||||
|
|
@ -114,11 +224,20 @@ export default function Overview(props) {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-xs mt-4 text-[#737378]">
|
||||
Community metrics can be useful in evaluating the growth trajectory of Waku. These metrics include data related to developer adoption, user base and other parts of Waku community.
|
||||
<div id="discordchart bg-white p-4">
|
||||
<AreaChart
|
||||
className="h-80
|
||||
dark:tremor-content-white"
|
||||
data={Array.isArray(props.saves) ? props.saves.slice().reverse() : []} // Reverse the array if it's an array
|
||||
index="name"
|
||||
categories={['data.stats.discord']}
|
||||
valueFormatter={dataFormatter}
|
||||
yAxisWidth={60}
|
||||
onValueChange={(v) => console.log(v)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-3 mt-5">
|
||||
<span className="inline-flex items-center justify-center rounded-full bg-[#737378] px-2.5 py-0.5 text-[#000000]">
|
||||
<span className="inline-flex items-center justify-center bg-[#737378] px-2.5 py-0.5 text-[#000000]">
|
||||
<p className="whitespace-nowrap text-xs">Beta</p>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -126,7 +245,7 @@ export default function Overview(props) {
|
|||
|
||||
<div
|
||||
id="networkmetricsbox"
|
||||
className="md:w-1/2 border-[#202021] hover:border-white border-4 rounded-lg p-6"
|
||||
className="md:w-1/2 border-[#202021] hover:border-white border p-6"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-xl">Network metrics</h1>
|
||||
|
|
@ -141,63 +260,36 @@ export default function Overview(props) {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-xs mt-4 text-[#737378]">
|
||||
Network metrics include statistical and benchmark data related to Waku network. These metrics include data related to node volume, network capacity, scalability and performance.
|
||||
</div>
|
||||
<div className="flex space-x-3 mt-5">
|
||||
<span className="inline-flex items-center justify-center rounded-full bg-[#737378] px-2.5 py-0.5 text-[#000000]">
|
||||
<p className="whitespace-nowrap text-xs">Work in progress</p>
|
||||
</span>
|
||||
<div className="mt-10 items-center">
|
||||
<p className="my-4 text-tremor-default flex items-center justify-between text-tremor-content dark:text-dark-tremor-content">
|
||||
<span>Source</span>
|
||||
<span>Views</span>
|
||||
</p>
|
||||
<BarList data={data} className="h-80 dark:tremor-content-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a target="_blank" href="https://docs.waku.org">
|
||||
|
||||
<div
|
||||
id="docs"
|
||||
className="mt-10 border-[#202021] hover:border-white border-4 rounded-lg p-6"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-xl">Documentation</h1>
|
||||
<svg
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM7 7h10M7 12h10M7 17h6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://github.com/waku-org/metrics.waku.org/issues" target="_blank">
|
||||
|
||||
<div
|
||||
id="propose-a-metric"
|
||||
className="mt-10 border-[#202021] hover:border-white border-4 rounded-lg p-6"
|
||||
<div
|
||||
id="propose-a-metric"
|
||||
className="mt-10 border p-6"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-xl">Propose a new metric</h1>
|
||||
<svg
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 26 26"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-xl">Propose a new metric</h1>
|
||||
<svg
|
||||
className="w-10 h-10"
|
||||
viewBox="0 0 26 26"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M12.906-.031a1 1 0 0 0-.125.031A1 1 0 0 0 12 1v1H3a3 3 0 0 0-3 3v13c0 1.656 1.344 3 3 3h9v.375l-5.438 2.719a1.006 1.006 0 0 0 .875 1.812L12 23.625V24a1 1 0 1 0 2 0v-.375l4.563 2.281a1.006 1.006 0 0 0 .875-1.812L14 21.375V21h9c1.656 0 3-1.344 3-3V5a3 3 0 0 0-3-3h-9V1a1 1 0 0 0-1.094-1.031zM2 5h22v13H2V5zm18.875 1a1 1 0 0 0-.594.281L17 9.563L14.719 7.28a1 1 0 0 0-1.594.219l-2.969 5.188l-1.219-3.063a1 1 0 0 0-1.656-.344l-3 3a1.016 1.016 0 1 0 1.439 1.44l1.906-1.906l1.438 3.562a1 1 0 0 0 1.812.125l3.344-5.844l2.062 2.063a1 1 0 0 0 1.438 0l4-4A1 1 0 0 0 20.875 6z"
|
||||
<path
|
||||
fill="#ffffff"
|
||||
d="M12.906-.031a1 1 0 0 0-.125.031A1 1 0 0 0 12 1v1H3a3 3 0 0 0-3 3v13c0 1.656 1.344 3 3 3h9v.375l-5.438 2.719a1.006 1.006 0 0 0 .875 1.812L12 23.625V24a1 1 0 1 0 2 0v-.375l4.563 2.281a1.006 1.006 0 0 0 .875-1.812L14 21.375V21h9c1.656 0 3-1.344 3-3V5a3 3 0 0 0-3-3h-9V1a1 1 0 0 0-1.094-1.031zM2 5h22v13H2V5zm18.875 1a1 1 0 0 0-.594.281L17 9.563L14.719 7.28a1 1 0 0 0-1.594.219l-2.969 5.188l-1.219-3.063a1 1 0 0 0-1.656-.344l-3 3a1.016 1.016 0 1 0 1.439 1.44l1.906-1.906l1.438 3.562a1 1 0 0 0 1.812.125l3.344-5.844l2.062 2.063a1 1 0 0 0 1.438 0l4-4A1 1 0 0 0 20.875 6z"
|
||||
/>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@ import Docker from "@/utils/docker";
|
|||
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
// Logos Design System imports
|
||||
import { ThemeProvider, defaultThemes } from '@acid-info/lsd-react'
|
||||
|
||||
export default function Router() {
|
||||
const [mobileMenu, setMobileMenu] = useState(false);
|
||||
const [screen, setScreen] = useState(0);
|
||||
|
|
@ -53,7 +56,7 @@ export default function Router() {
|
|||
setIsLoggedIn(true);
|
||||
}
|
||||
|
||||
const discord = await Discord.getServerMembers("j5pGbn7MHZ");
|
||||
const discord = await Discord.getServerMembers("gMPAzmcDER");
|
||||
const github = await Github.getOrganizationFollowers("waku-org");
|
||||
|
||||
const repos = [
|
||||
|
|
@ -133,7 +136,7 @@ export default function Router() {
|
|||
{mobileMenu === true ? (
|
||||
<div
|
||||
id="mobile-nav"
|
||||
className="flex h-screen flex-col justify-between bg-[#202021] w-full md:w-auto md:hidden"
|
||||
className="flex h-screen flex-col justify-between w-full md:w-auto md:hidden"
|
||||
>
|
||||
<div className="px-4 py-6">
|
||||
<div className="flex justify-between">
|
||||
|
|
@ -168,8 +171,8 @@ export default function Router() {
|
|||
}}
|
||||
className={
|
||||
screen === 0
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Overview
|
||||
|
|
@ -178,7 +181,7 @@ export default function Router() {
|
|||
|
||||
<li>
|
||||
<details className="group [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-white opacity-70">
|
||||
<span className="text-sm font-medium">Metrics</span>
|
||||
|
||||
<span className="shrink-0 transition duration-300 group-open:-rotate-180">
|
||||
|
|
@ -206,8 +209,8 @@ export default function Router() {
|
|||
}}
|
||||
className={
|
||||
screen === 1
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Community
|
||||
|
|
@ -222,8 +225,8 @@ export default function Router() {
|
|||
}}
|
||||
className={
|
||||
screen === 2
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Network
|
||||
|
|
@ -235,7 +238,7 @@ export default function Router() {
|
|||
|
||||
<li>
|
||||
<details className="group [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-white opacity-70">
|
||||
<span className="text-sm font-medium"> Growth </span>
|
||||
|
||||
<span className="shrink-0 transition duration-300 group-open:-rotate-180">
|
||||
|
|
@ -263,8 +266,8 @@ export default function Router() {
|
|||
}}
|
||||
className={
|
||||
screen === 3
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Timeline
|
||||
|
|
@ -279,8 +282,8 @@ export default function Router() {
|
|||
}}
|
||||
className={
|
||||
screen === 4
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Ecosystem
|
||||
|
|
@ -298,8 +301,8 @@ export default function Router() {
|
|||
}}
|
||||
className={
|
||||
screen === 5
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Benchmarks
|
||||
|
|
@ -308,12 +311,12 @@ export default function Router() {
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="sticky inset-x-0 bottom-0 border-x-4 border-[#202021] mb-1 hover:text-black">
|
||||
<div className="sticky inset-x-0 bottom-0 border-white">
|
||||
<div
|
||||
onClick={() => {
|
||||
session === false ? handleSignIn() : handleSignOut();
|
||||
}}
|
||||
className="flex space-x-3 items-center gap-2 bg-[#000000] p-4 hover:bg-gray-50 rounded-lg"
|
||||
className="flex space-x-3 items-center gap-2 bg-[#ffffff] text-black p-3"
|
||||
>
|
||||
<div className="h-10 w-10 flex items-center justify-center bg-[#202021] rounded-full object-cover">
|
||||
{session && session?.user?.user_metadata?.avatar_url ? (
|
||||
|
|
@ -403,7 +406,7 @@ export default function Router() {
|
|||
<div className="hidden md:flex w-full">
|
||||
<div
|
||||
id="desktop-nav"
|
||||
className="flex sticky top-0 h-screen flex-col justify-between bg-[#202021] w-full md:w-1/6 "
|
||||
className="flex sticky top-0 h-screen flex-col justify-between border-r w-full md:w-1/6 "
|
||||
>
|
||||
<div className="px-4 py-6">
|
||||
<div className="flex justify-between">
|
||||
|
|
@ -435,8 +438,8 @@ export default function Router() {
|
|||
onClick={() => setScreen(0)}
|
||||
className={
|
||||
screen === 0
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Overview
|
||||
|
|
@ -445,7 +448,7 @@ export default function Router() {
|
|||
|
||||
<li>
|
||||
<details className="group [&_summary::-webkit-details-marker]:hidden">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-white opacity-70">
|
||||
<span className="text-sm font-medium">Metrics</span>
|
||||
|
||||
<span className="shrink-0 transition duration-300 group-open:-rotate-180">
|
||||
|
|
@ -470,8 +473,8 @@ export default function Router() {
|
|||
onClick={() => setScreen(1)}
|
||||
className={
|
||||
screen === 1
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 cursor-pointer"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white cursor-pointer"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Community
|
||||
|
|
@ -483,8 +486,8 @@ export default function Router() {
|
|||
onClick={() => setScreen(2)}
|
||||
className={
|
||||
screen === 2
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 cursor-pointer"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white cursor-pointer"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Network
|
||||
|
|
@ -496,7 +499,7 @@ export default function Router() {
|
|||
|
||||
<li>
|
||||
<details className="group [&_summary::-webkit-details-marker]:hidden cursor-pointer">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 cursor-pointer">
|
||||
<summary className="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-white opacity-70 cursor-pointer">
|
||||
<span className="text-sm font-medium"> Growth </span>
|
||||
|
||||
<span className="shrink-0 transition duration-300 group-open:-rotate-180">
|
||||
|
|
@ -521,8 +524,8 @@ export default function Router() {
|
|||
onClick={() => setScreen(3)}
|
||||
className={
|
||||
screen === 3
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 cursor-pointer"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white cursor-pointer"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Timeline
|
||||
|
|
@ -534,8 +537,8 @@ export default function Router() {
|
|||
onClick={() => setScreen(4)}
|
||||
className={
|
||||
screen === 4
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 cursor-pointer "
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white cursor-pointer"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Ecosystem
|
||||
|
|
@ -550,8 +553,8 @@ export default function Router() {
|
|||
onClick={() => setScreen(5)}
|
||||
className={
|
||||
screen === 5
|
||||
? "block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 cursor-pointer"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-black hover:text-white cursor-pointer"
|
||||
? "block border-l-4 px-4 py-2 text-sm font-medium text-white"
|
||||
: "block rounded-lg px-4 py-2 text-sm font-medium text-white opacity-70"
|
||||
}
|
||||
>
|
||||
Benchmarks
|
||||
|
|
@ -560,12 +563,12 @@ export default function Router() {
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="sticky inset-x-0 bottom-0 border-x-4 border-[#202021] mb-1 hover:text-black cursor-pointer">
|
||||
<div className="sticky inset-x-0 bottom-0 border cursor-pointer">
|
||||
<div
|
||||
onClick={() => {
|
||||
session === false ? handleSignIn() : handleSignOut();
|
||||
}}
|
||||
className="flex space-x-3 items-center gap-2 bg-[#000000] p-4 hover:bg-gray-50 rounded-lg"
|
||||
className="flex space-x-3 items-center gap-2 bg-[#000000] p-4 hover:bg-gray-50 hover:text-black"
|
||||
>
|
||||
<div className="h-10 w-10 flex items-center justify-center bg-[#202021] rounded-full object-cover">
|
||||
{session && session?.user?.user_metadata?.avatar_url ? (
|
||||
|
|
@ -599,8 +602,11 @@ export default function Router() {
|
|||
<div className="p-10 w-full">
|
||||
{(screen === 0 && (
|
||||
<Overview
|
||||
stats={stats}
|
||||
isLoading={overviewLoading}
|
||||
stats={stats}
|
||||
saves={saves}
|
||||
setSaves={setSaves}
|
||||
isLoading={isLoading}
|
||||
isLoggedIn={isLoggedIn}
|
||||
previous={
|
||||
saves && Object.keys(saves).length
|
||||
? Object.values(saves)[Object.keys(saves).length - 1]
|
||||
|
|
|
|||
|
|
@ -86,13 +86,13 @@ export default function Timeline(props) {
|
|||
onClose={onCloseModal}
|
||||
center
|
||||
>
|
||||
<div className="rounded-xl">
|
||||
<div className="">
|
||||
<div className="m-4">
|
||||
<h1 className="text-xl">Snapshot</h1>
|
||||
<div className="mt-4">
|
||||
<form onSubmit={(e) => handleNewSave(e)} className="space-y-3">
|
||||
<input
|
||||
className="border-[#2c2c2c3e] border-2 w-full rounde -lg p-2 text-sm border-2 rounded-lg"
|
||||
className="border-[#2c2c2c3e] border-2 w-full p-2 text-sm"
|
||||
placeholder="Name"
|
||||
value={name}
|
||||
required={true}
|
||||
|
|
@ -100,7 +100,7 @@ export default function Timeline(props) {
|
|||
/>
|
||||
<br />
|
||||
<div className="flex justify-end">
|
||||
<button className="bg-black rounded-lg text-white p-2">
|
||||
<button className="bg-black text-white p-2">
|
||||
Create snapshot
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,21 @@ import Percentage from "@/components/molecules/Percentage";
|
|||
|
||||
export default function CommunityMetricsCard(props) {
|
||||
return (
|
||||
<div className="flex md:w-auto items-end justify-between rounded-lg bg-white p-6 dark:bg-[#202021]">
|
||||
<div className="flex items-center gap-4">
|
||||
{props.icon}
|
||||
<div className="flex md:w-auto items-end justify-between border p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
{props.icon}
|
||||
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-[#707071] dark:text-gray-400">
|
||||
{props.title}
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-[#707071] dark:text-gray-400">
|
||||
{props.title}
|
||||
</p>
|
||||
|
||||
<p className="text-2xl font-medium text-gray-900 dark:text-white">
|
||||
{props.isLoading ? "..." : props.current}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-2xl font-medium text-gray-900 dark:text-white">
|
||||
{props.isLoading ? "..." : props.current}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Percentage previous={props.previous} current={props.current} />
|
||||
</div>
|
||||
<Percentage previous={props.previous} current={props.current} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import React from "react";
|
||||
import Percentage from "@/components/molecules/Percentage";
|
||||
|
||||
import { Card } from "@acid-info/lsd-react";
|
||||
|
||||
|
||||
export default function OverviewCard(props) {
|
||||
return (
|
||||
<div className="flex md:w-auto items-end justify-between rounded-lg bg-white p-6 dark:bg-[#202021]">
|
||||
<div className="flex md:w-auto items-end justify-between border p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
{props.icon}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default function Percentage(props) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`inline-flex gap-2 rounded p-1 ${
|
||||
className={`inline-flex gap-2 p-1 ${
|
||||
props.current >= previous
|
||||
? "bg-green-700 text-white"
|
||||
: "bg-red-700 text-white"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
|
|
@ -9,12 +9,18 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@acid-info/lsd-react": "^0.1.0-beta.3",
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@remixicon/react": "^4.2.0",
|
||||
"@supabase/auth-helpers-nextjs": "^0.7.4",
|
||||
"@supabase/supabase-js": "^2.33.1",
|
||||
"@tremor/react": "^3.14.1",
|
||||
"autoprefixer": "10.4.15",
|
||||
"axios": "^1.5.0",
|
||||
"axios-oauth-1.0a": "^0.3.6",
|
||||
"cheerio": "^1.0.0-rc.12",
|
||||
"discord.js": "^14.14.1",
|
||||
"encoding": "^0.1.13",
|
||||
"eslint": "8.48.0",
|
||||
"eslint-config-next": "14.0.4",
|
||||
|
|
@ -26,9 +32,12 @@
|
|||
"react-responsive-modal": "^6.4.2",
|
||||
"reactjs-popup": "^2.0.5",
|
||||
"tailwindcss": "3.3.3",
|
||||
"typescript": "^5.2.2"
|
||||
"typescript": "^5.2.2",
|
||||
"zlib": "^1.0.5",
|
||||
"zlib-sync": "^0.1.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@types/react": "18.2.21"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
import colors from 'tailwindcss/colors';
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
// Path to Tremor module
|
||||
'./node_modules/@tremor/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
@ -12,7 +16,70 @@ module.exports = {
|
|||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
colors: {
|
||||
// light mode
|
||||
tremor: {
|
||||
brand: {
|
||||
faint: colors.blue[50],
|
||||
muted: colors.blue[200],
|
||||
subtle: colors.blue[400],
|
||||
DEFAULT: colors.blue[500],
|
||||
emphasis: colors.blue[700],
|
||||
inverted: colors.white,
|
||||
},
|
||||
background: {
|
||||
muted: colors.gray[50],
|
||||
subtle: colors.gray[100],
|
||||
DEFAULT: colors.white,
|
||||
emphasis: colors.gray[700],
|
||||
},
|
||||
border: {
|
||||
DEFAULT: colors.gray[200],
|
||||
},
|
||||
ring: {
|
||||
DEFAULT: colors.gray[200],
|
||||
},
|
||||
content: {
|
||||
subtle: colors.gray[400],
|
||||
DEFAULT: colors.gray[500],
|
||||
emphasis: colors.gray[700],
|
||||
strong: colors.gray[900],
|
||||
inverted: colors.white,
|
||||
},
|
||||
},
|
||||
// dark mode
|
||||
'dark-tremor': {
|
||||
brand: {
|
||||
faint: '#FFFFFF',
|
||||
muted: '#FFFFFF',
|
||||
subtle: '#FFFFFF',
|
||||
DEFAULT: '#FFFFFF',
|
||||
emphasis: '#FFFFFF',
|
||||
inverted: '#FFFFFF',
|
||||
},
|
||||
background: {
|
||||
muted: '#131A2B',
|
||||
subtle: colors.gray[800],
|
||||
DEFAULT: colors.gray[900],
|
||||
emphasis: colors.gray[300],
|
||||
},
|
||||
border: {
|
||||
DEFAULT: colors.gray[800],
|
||||
},
|
||||
ring: {
|
||||
DEFAULT: colors.gray[800],
|
||||
},
|
||||
content: {
|
||||
subtle: colors.gray[600],
|
||||
DEFAULT: colors.gray[500],
|
||||
emphasis: colors.gray[200],
|
||||
strong: colors.gray[50],
|
||||
inverted: colors.gray[950],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue