diff --git a/client/src/pages/Playground/Playground.scss b/client/src/pages/API/API.scss similarity index 54% rename from client/src/pages/Playground/Playground.scss rename to client/src/pages/API/API.scss index 199750ef..62e78171 100644 --- a/client/src/pages/Playground/Playground.scss +++ b/client/src/pages/API/API.scss @@ -1,3 +1,24 @@ +.api-page-header { + font-size: 36px; + margin-bottom: 15px; +} + +.api-info-container { + padding: 20px; + p { + margin-bottom: 15px; + code { + color: #c7254e; + } + } +} + +.playground-page-header { + padding-left: 20px; + font-size: 36px; + margin-bottom: 15px; +} + .playground-page-container { background-color: var(--background); display: flex; diff --git a/client/src/pages/Playground/Playground.tsx b/client/src/pages/API/API.tsx similarity index 81% rename from client/src/pages/Playground/Playground.tsx rename to client/src/pages/API/API.tsx index 5024497a..c1256292 100644 --- a/client/src/pages/Playground/Playground.tsx +++ b/client/src/pages/API/API.tsx @@ -1,6 +1,6 @@ // hooks/dependencies import { useState } from 'react'; -import './Playground.scss'; +import './API.scss'; import { API_URL } from 'config'; // graphiql @@ -185,7 +185,7 @@ const query6 = ` const fetcher = createGraphiQLFetcher({ url: API_URL ?? '' }); -export const Playground = () => { +export const API = () => { const [isCopied, setIsCopied] = useState(false); const onCopyText = () => { @@ -339,37 +339,55 @@ export const Playground = () => { ]; return ( -
+ The DGIdb API can be used to query for drug-gene interactions in your + own applications. +
+
+ To query the API, make GraphQL queries to:{' '}
+ https://dgidb.org/api/graphql
+
+ For examples and to experiment with API requests in your browser, + refer to the Playground below. +