Skip to content

Commit

Permalink
chore: updated environments
Browse files Browse the repository at this point in the history
  • Loading branch information
@froid1911
froid1911 committed Oct 2, 2024
1 parent 91a66fb commit afd2820
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 151 deletions.
134 changes: 47 additions & 87 deletions frontend/components/overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,65 @@
import Image from "next/image";
import Connect from "../public/connect-icon.svg";
import Switchboard from "../public/switchboard-icon.svg";
import Fusion from "../public/fusion-icon.png";
import Link from "next/link";
export default function Overview({ name }: { name: string }) {
import { Environment } from "../pages";
export default function Overview({ name, env }: { name: string; env: Environment }) {
return (
<div className="flex flex-col gap-4 max-w-xl items-start px-12">
<div className="flex flex-col gap-4 items-start px-12">
<div className="group relative">
<h3 className="mt-3 text-lg font-semibold text-gray-900 group-hover:text-gray-600">
<h3 className="mt-3 text-xl font-semibold text-gray-900 group-hover:text-gray-600">
<span className="absolute inset-0"></span>
{name}
</h3>
</div>
<div className="flex flex-row">
<div className="flex flex-0 w-3">
<h2 className="text-base font-semibold text-gray-900 -rotate-90">Prod</h2>
</div>
<div className="flex flex-col grow flex-1">
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/${name.toLocaleLowerCase()}/connect/`} target="_blank">
<span className="absolute inset-0"></span>
Connect
</Link>
</p>

<div className="flex flex-row gap-8">
{Object.keys(env).map((envName) => (
<div className="flex flex-col gap-4" key={envName}>
<div className="flex flex-0 ">
<h2 className="text-base font-semibold text-gray-900 ">{envName}</h2>
</div>
</div>
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/${name.toLocaleLowerCase()}/switchboard`} target="_blank">
<span className="absolute inset-0"></span>
Switchboard
</Link>
</p>
</div>
</div>
</div>
</div>
<div className="flex flex-row">
<div className="flex flex-0 w-3">
<h2 className="text-base font-semibold text-gray-900 -rotate-90">Stage</h2>
</div>
<div className="flex flex-col grow flex-1">
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/staging/${name.toLocaleLowerCase()}/connect/`} target="_blank">
<span className="absolute inset-0"></span>
Connect
</Link>
</p>
</div>
</div>
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/staging/${name.toLocaleLowerCase()}/switchboard`} target="_blank">
<span className="absolute inset-0"></span>
Switchboard
</Link>
</p>
</div>
</div>
</div>
</div>
{name === "Powerhouse" && (
<div className="flex flex-row">
<div className="flex flex-0 w-3">
<h2 className="text-base font-semibold text-gray-900 -rotate-90">Dev</h2>
</div>
<div className="flex flex-col grow flex-1">
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/develop/${name.toLocaleLowerCase()}/connect/`} target="_blank">
<span className="absolute inset-0"></span>
Connect
</Link>
</p>
<div className="flex flex-col grow flex-1">
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Connect} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={env[envName].connect} target="_blank">
<span className="absolute inset-0"></span>
Connect
</Link>
</p>
</div>
</div>
</div>
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/develop/${name.toLocaleLowerCase()}/switchboard`} target="_blank">
<span className="absolute inset-0"></span>
Switchboard
</Link>
</p>
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Switchboard} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={env[envName].switchboard} target="_blank">
<span className="absolute inset-0"></span>
Switchboard
</Link>
</p>
</div>
</div>
{env[envName].fusion && (
<div className="relative flex items-center gap-x-4">
<Image width="32" height="32" alt="MakerDAO" src={Fusion} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={env[envName].fusion} target="_blank">
<span className="absolute inset-0"></span>
Fusion
</Link>
</p>
</div>
</div>
)}
</div>
</div>
</div>
)}
))}
</div>
</div>
);
}
172 changes: 108 additions & 64 deletions frontend/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,79 +6,123 @@ import Renown from "../public/renown-icon.svg";
import Fusion from "../public/fusion-icon.png";
import Academy from "../public/academy-icon.svg";
import Link from "next/link";

export interface Environment {
production: {
connect: string;
switchboard: string;
fusion?: string;
};
staging?: {
connect: string;
switchboard: string;
fusion?: string;
};
develop?: {
connect: string;
switchboard: string;
fusion?: string;
};
}
const Home: NextPage = () => {
const environmentKeys = ["Powerhouse", "Sky.money"] as const;
type EnvironmentKey = (typeof environmentKeys)[number];

const environments: Record<EnvironmentKey, Environment> = {
Powerhouse: {
production: {
connect: "https://connect.phd",
switchboard: "https://switchboard.phd",
// fusion: "https://apps.powerhouse.io/powerhouse/fusion",
},
staging: {
connect: "https://staging.connect.phd",
switchboard: "https://staging.switchboard.phd",
// fusion: "https://apps.powerhouse.io/staging/powerhouse/fusion",
},
develop: {
connect: "https://apps.powerhouse.io/develop/powerhouse/connect/",
switchboard: "https://apps.powerhouse.io/develop/powerhouse/switchboard",
},
},
"Sky.money": {
production: {
connect: "https://connect.sky.money",
switchboard: "https://switchboard.sky.money",
fusion: "https://fusion.sky.money",
},
staging: {
connect: "https://connect-staging.sky.money",
switchboard: "https://switchboard-staging.sky.money",
fusion: "https://fusion-staging.sky.money",
},
},
};

return (
<div className="container-fluid">
<div className="bg-white py-24 sm:py-32">
<div className="mx-auto max-w-4xl flex flex-col gap-8">
<div className="mx-auto max-w-2xl lg:mx-0 flex flex-row gap-4">
<Image src={Powerhouse} alt="Powerhouse" width="40" height="40" />
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Apps of Powerhouse</h2>
{/* <p className="mt-2 text-lg leading-8 text-gray-600">Learn how to grow your business with our expert advice.</p> */}
<div className="container mx-auto bg-white py-24 sm:py-32 flex flex-col gap-8">
<div className="mx-auto max-w-2xl lg:mx-0 flex flex-row gap-4">
<Image src={Powerhouse} alt="Powerhouse" width="40" height="40" />
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Apps of Powerhouse</h2>
{/* <p className="mt-2 text-lg leading-8 text-gray-600">Learn how to grow your business with our expert advice.</p> */}
</div>
<div className="flex flex-row gap-4">
<div className="relative flex items-center gap-x-4 px-12">
<Image width="32" height="32" alt="Sky.money" src={Renown} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<Link href={`https://www.renown.id`} target="_blank">
<span className="absolute inset-0"></span>
Renown
</Link>
</p>
</div>
<div className="grid lg:grid-cols-3 gap-x-8 grid-cols-1">
<div className="relative flex items-center gap-x-4 px-12">
<Image width="32" height="32" alt="MakerDAO" src={Renown} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<Link href={`https://apps.powerhouse.io/renown`} target="_blank">
<span className="absolute inset-0"></span>
Renown
</Link>
</p>
</div>
</div>
<div className="relative flex items-center gap-x-4 px-12">
<Image width="32" height="32" alt="MakerDAO" src={Academy} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<span className="absolute inset-0"></span>
Academy
</p>
</div>
</div>
<div className="relative flex items-center gap-x-4 px-12">
<Image width="32" height="32" alt="MakerDAO" src={Fusion} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<span className="absolute inset-0"></span>
Fusion
</p>
</div>
</div>
</div>
<div className="relative flex items-center gap-x-4 px-12">
<Image width="32" height="32" alt="Sky.money" src={Academy} className="h-10 w-10 rounded-full bg-gray-50" />
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<span className="absolute inset-0"></span>
Academy
</p>
</div>
<div className="grid mx-autogrid grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3 border-t border-gray-200">
<Overview name="Powerhouse" />
<Overview name="MakerDAO" />
<Overview name="Arbitrum" />
</div>

</div>

<div className="flex flex-col gap-8">
{environmentKeys.map((name) => (
<Overview name={name} key={name} env={environments[name]} />
))}
</div>

<div className="pl-16 pt-8 border-t border-gray-200 flex flex-col gap-4">
<div className="relative flex items-center gap-x-4">
<Image width="25" height="25" alt="Sky.money" src={`/storybook.png`} className="h-8 w-8 bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://powerhouse-design-system.vercel.app/`} target="_blank">
<span className="absolute inset-0"></span>
Design System
</Link>
</p>
</div>
<div className="pl-16 pt-8 border-t border-gray-200 flex flex-col gap-4">
<div className="relative flex items-center gap-x-4">
<Image width="25" height="25" alt="MakerDAO" src={`/storybook.png`} className="h-8 w-8 bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://powerhouse-design-system.vercel.app/`} target="_blank">
<span className="absolute inset-0"></span>
Design System
</Link>
</p>
</div>
</div>
<div className="relative flex items-center gap-x-4">
<Image width="25" height="25" alt="MakerDAO" src={`/storybook.png`} className="h-8 w-8 bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://document-model-libs.vercel.app/`} target="_blank">
<span className="absolute inset-0"></span>
Document Model Libs
</Link>
</p>
</div>
</div>
</div>
<div className="relative flex items-center gap-x-4">
<Image width="25" height="25" alt="Sky.money" src={`/storybook.png`} className="h-8 w-8 bg-gray-50" />
<div className="text-sm">
<p className="font-semibold text-gray-900">
<Link href={`https://document-model-libs.vercel.app/`} target="_blank">
<span className="absolute inset-0"></span>
Document Model Libs
</Link>
</p>
</div>
</div>
</div>
</div>


);
};

Expand Down

0 comments on commit afd2820

Please sign in to comment.