Skip to content

Commit 4b855b1

Browse files
awtknsawtkns
committed
🎨 Basics of open source section
1 parent f9b0b8c commit 4b855b1

File tree

4 files changed

+138
-3
lines changed

4 files changed

+138
-3
lines changed

‎next/src/components/PrimaryButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import clsx from "clsx";
22

33
type PrimaryButtonProps = {
44
children: string;
5-
onClick: () => void;
5+
onClick?: () => void;
66
};
77
export default function PrimaryButton({ children, onClick }: PrimaryButtonProps) {
88
return (
99
<button
1010
type="button"
1111
className={clsx(
12-
"text-md rounded-lg bg-[#BF7DFF] px-4 py-3 text-white shadow-sm ",
12+
"text-md rounded-lg bg-[#BF7DFF] px-4 py-2.5 text-white shadow-sm ",
1313
"transition-colors duration-300 hover:border-blue-200 hover:bg-[#9124ff] hover:text-zinc-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
1414
)}
1515
onClick={onClick}

‎next/src/components/console/MacWindowHeader.tsx

+33-1
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import PopIn from "../motions/popin";
77
import Expand from "../motions/expand";
88
import Menu from "../Menu";
99
import { CgExport } from "react-icons/cg";
10-
import type { ReactNode } from "react";
10+
import type { PropsWithChildren, ReactNode } from "react";
1111
import React from "react";
1212
import type { Message } from "../../types/message";
1313
import { FiClipboard } from "react-icons/fi";
14+
import clsx from "clsx";
1415

1516
export const messageListId = "chat-window-message-list";
1617

@@ -114,3 +115,34 @@ export const MacWindowHeader = (props: HeaderProps) => {
114115
</div>
115116
);
116117
};
118+
119+
interface MacWindowInternalProps extends PropsWithChildren {
120+
className?: string;
121+
}
122+
123+
export const MacWindowInternal = (props: MacWindowInternalProps) => {
124+
return (
125+
<div
126+
className={clsx(
127+
"ml-2 flex items-baseline gap-1 overflow-visible rounded-t-3xl p-1.5",
128+
props.className
129+
)}
130+
>
131+
<PopIn delay={0.4}>
132+
<div className="h-2 w-2 rounded-full bg-red-500" />
133+
</PopIn>
134+
<PopIn delay={0.5}>
135+
<div className="h-2 w-2 rounded-full bg-yellow-500" />
136+
</PopIn>
137+
<PopIn delay={0.6}>
138+
<div className="h-2 w-2 rounded-full bg-green-500" />
139+
</PopIn>
140+
<Expand
141+
delay={0.75}
142+
className="ml-1 flex flex-grow font-mono text-[8pt] font-bold text-gray-400"
143+
>
144+
{props.children}
145+
</Expand>
146+
</div>
147+
);
148+
};

‎next/src/components/landing/OpenSource.tsx

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from "react";
2+
import { MacWindowInternal } from "../console/MacWindowHeader";
3+
import clsx from "clsx";
4+
import { FaGithub } from "react-icons/fa";
5+
import PrimaryButton from "../PrimaryButton";
6+
7+
interface TerminalProps {
8+
className?: string;
9+
title?: string;
10+
children?: React.ReactNode;
11+
}
12+
13+
const OpenSource = () => {
14+
return (
15+
<div className="min-h-[50vh] w-full">
16+
<div className="flex flex-row">
17+
<div className="relative w-full">
18+
<Terminal className="absolute" title="index.ts">
19+
<pre className="overflow-hidden">
20+
{"" +
21+
"<!DOCTYPE html>\n" +
22+
"<html>\n" +
23+
"<head>\n" +
24+
" <title>My AgentGPT Website</title>\n" +
25+
"</head>\n" +
26+
"<body>\n" +
27+
" <h1>Welcome to AgentGPT!</h1>\n" +
28+
" <p>Explore the power of autonomous AI agents.</p>\n" +
29+
' <script src="https://agentgpt.reworkd.ai/agentgpt.js"></script>\n' +
30+
" <script>\n" +
31+
" // Connect to AgentGPT API\n" +
32+
" const agent = new AgentGPT();\n" +
33+
" agent.connect('YOUR_API_KEY');\n" +
34+
" \n" +
35+
" // Example code to interact with AgentGPT\n" +
36+
" agent.createAgent('MyAIAssistant');\n" +
37+
" agent.setGoal('Sort my emails');\n" +
38+
" agent.start();\n" +
39+
" </script>\n" +
40+
"</body>\n" +
41+
"</html>\n"}
42+
</pre>
43+
</Terminal>
44+
<Terminal className="absolute left-16 top-20 z-10" title="agent_service.py">
45+
<pre>
46+
{"import requests\n" +
47+
"\n" +
48+
"# Define the API endpoint\n" +
49+
'url = "https://api.agentgpt.example.com"\n' +
50+
"\n" +
51+
"# Make a GET request to retrieve data from the API\n" +
52+
"response = requests.get(url)\n" +
53+
"\n" +
54+
"# Process the response data\n" +
55+
"if response.status_code == 200:\n" +
56+
" data = response.json()\n" +
57+
" # Perform further actions with the data\n" +
58+
" print(data)\n" +
59+
"else:\n" +
60+
' print("Error: Unable to fetch data from the API")\n'}
61+
</pre>
62+
</Terminal>
63+
</div>
64+
<div className="mt-28 w-full">
65+
<div className="flex w-fit flex-row items-center gap-2 rounded-full bg-neutral-900 bg-gradient-to-bl from-neutral-800 to-transparent p-2 pr-4">
66+
<FaGithub size={32} />
67+
<div>
68+
24.4 k<span className="text-gray-400"> stars</span>
69+
</div>
70+
</div>
71+
<h3 className="my-4 text-6xl font-medium tracking-tight">Proudly Open Source</h3>
72+
<p className="mb-8 font-extralight leading-7 text-gray-400">
73+
We think the power of AI should be available to everyone and should be driven by
74+
community. This is why we are proudly open source. We'd love to hear your feedback at
75+
every step of the journey.
76+
</p>
77+
<a href="https://github.com/reworkd" target="_blank" className="mt-16">
78+
<PrimaryButton>View on Github</PrimaryButton>
79+
</a>
80+
</div>
81+
</div>
82+
</div>
83+
);
84+
};
85+
86+
const Terminal = (props: TerminalProps) => {
87+
return (
88+
<div
89+
className={clsx("w-full max-w-md rounded-xl bg-neutral-800 drop-shadow-2xl", props.className)}
90+
>
91+
<MacWindowInternal>{props.title}</MacWindowInternal>
92+
<div className="h-72 overflow-hidden rounded-b-xl bg-neutral-900 p-4 text-[8pt] text-gray-400">
93+
{props.children}
94+
</div>
95+
</div>
96+
);
97+
};
98+
99+
export default OpenSource;

‎next/src/pages/secret-landing-page.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import NavLayout from "../components/NavLayout";
33
import Hero from "../components/landing/Hero";
44
import Sections from "../components/landing/Section";
55
import ConnectorSection from "../components/landing/ConnectorSection";
6+
import OpenSource from "../components/landing/OpenSource";
67

78
const HomePage = () => {
89
return (
@@ -24,6 +25,9 @@ const HomePage = () => {
2425
<Sections />
2526
</div>
2627
</div>
28+
<div className="relative flex w-full items-center">
29+
<OpenSource />
30+
</div>
2731
<ConnectorSection />
2832
</div>
2933
</div>

0 commit comments

Comments
 (0)