-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: improve getting started page (#304)
## Why? bring a guided flow to the docs landing page with options for developers to chose and pick what they want to learn ## How? added a new component to reroute devs based on preference
- Loading branch information
1 parent
ac14cc1
commit 8204f82
Showing
10 changed files
with
283 additions
and
283 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React, { useState } from 'react'; | ||
| type DocIntroCardProps = { | ||
| title: string; | ||
| description?: string; | ||
| href: string; | ||
| icon?: string; | ||
| }; | ||
|
|
||
| const DocIntroCard: React.FC<DocIntroCardProps> = ({ | ||
| title, | ||
| description, | ||
| href, | ||
| icon, | ||
| }) => { | ||
| return ( | ||
| <a | ||
| href={href} | ||
| className="BigDocIntroCard relative flex items-center justify-between rounded-12 bg-gray-dark-3 p-16 !text-gray-dark-11 no-underline ring-gray-dark-8 hover:cursor-pointer hover:bg-gray-dark-4 active:bg-gray-dark-3" | ||
| > | ||
| <div className="flex w-full gap-5"> | ||
| <div className={`SmallDocIntroCard mx-5 rounded-12 p-1`} /> | ||
| <div className="w-full"> | ||
| <div className="relative flex w-full items-center justify-between"> | ||
| <div className="typo-btn-action text-white">{title}</div> | ||
| {icon ? ( | ||
| <div> | ||
| <img src={icon} alt={description} className="w-20 " /> | ||
| </div> | ||
| ) : ( | ||
| <div className="arrow absolute right-0">→</div> | ||
| )} | ||
| </div> | ||
| {description && ( | ||
| <div className="typo-btn-s-normal">{description}</div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </a> | ||
| ); | ||
| }; | ||
|
|
||
| export default DocIntroCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Button } from '@components/Button'; | ||
|
|
||
| type FleekFunctionProps = { | ||
| functionUrl: string; | ||
| }; | ||
|
|
||
| const FleekFunction = ({ functionUrl }: FleekFunctionProps) => { | ||
| const [data, setData] = useState<any>(null); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [loading, setLoading] = useState<boolean>(false); | ||
|
|
||
| const handleClick = async () => { | ||
| setLoading(true); | ||
|
|
||
| try { | ||
| const response = await fetch(functionUrl); | ||
| const result = await response.text(); | ||
| setData(result); | ||
| setError(null); | ||
| } catch (err) { | ||
| setError('Error fetching data.'); | ||
| setData(null); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="mb-12 rounded-12 bg-gray-dark-2 p-12"> | ||
| <div className="flex flex-col gap-12"> | ||
| <div className="flex gap-4"> | ||
| {/* three dots */} | ||
| <div className="w-2 rounded-full bg-rose-600 p-5" /> | ||
| <div className="w-2 rounded-full bg-yellow-dark-9 p-5" /> | ||
| <div className="w-2 rounded-full bg-green-600 p-5" /> | ||
| </div> | ||
| <div className="flex flex-col justify-between gap-12 lg:flex-row"> | ||
| <div className="flex-grow rounded-12 bg-gray-dark-6 px-7"> | ||
| {/* fn comes here */} | ||
| {functionUrl} | ||
| </div> | ||
| <div> | ||
| {/* run button */} | ||
| <Button variant="tertiary" onClick={handleClick}> | ||
| {loading ? 'Loading...' : 'Run Function'} | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mt-12 rounded-12 bg-gray-dark-1 p-7 font-sans"> | ||
| {/* fun output here */} | ||
| {data ? data : 'Please run the function above to see the output here. '} | ||
| </div> | ||
| </div> | ||
| // <div className="mx-auto w-full"> | ||
| // <Button variant="primary" onClick={handleClick}> | ||
| // {loading ? 'Loading...' : 'Run Function'} | ||
| // </Button> | ||
| // {data && ( | ||
| // <div className="mt-6 bg-gray-500 p-10 text-[1.8rem]"> | ||
| // <code className="text-white">Fleek Function Response: {data}</code> | ||
| // </div> | ||
| // )} | ||
| // {error && <div className="error text-red-500">{error}</div>} | ||
| // </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FleekFunction; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.