mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-27 06:34:06 +00:00
feat: welcome page options
This commit is contained in:
Anoop M D
@@ -43,25 +43,27 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
|
||||
return (
|
||||
<StyledWrapper className="mt-3 flex items-center">
|
||||
<ul role="tablist">
|
||||
{requestTabs && requestTabs.length ? requestTabs.map((rt) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center tab-label">
|
||||
<span className="tab-method" style={{fontSize: 13, color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
|
||||
</div>
|
||||
{rt.id === activeRequestTabId ? (
|
||||
<div className="flex pl-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
|
||||
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
|
||||
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
|
||||
</svg>
|
||||
{requestTabs && requestTabs.length ? (
|
||||
<ul role="tablist">
|
||||
{requestTabs && requestTabs.length ? requestTabs.map((rt) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center tab-label">
|
||||
<span className="tab-method" style={{fontSize: 13, color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</li>
|
||||
}) : null}
|
||||
</ul>
|
||||
{rt.id === activeRequestTabId ? (
|
||||
<div className="flex pl-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
|
||||
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
|
||||
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</li>
|
||||
}) : null}
|
||||
</ul>
|
||||
) : null}
|
||||
</StyledWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,25 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
.create-request {
|
||||
color: #737373;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.create-request-options {
|
||||
.http, .graphql {
|
||||
cursor: pointer;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
&:hover {
|
||||
span.name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import { IconPlus, IconUpload } from '@tabler/icons';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const Welcome = ({dispatch, actions}) => {
|
||||
@@ -9,18 +10,52 @@ const Welcome = ({dispatch, actions}) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWrapper className="pb-4 px-4">
|
||||
<div>Welcome</div>
|
||||
<StyledWrapper className="pb-4 px-6 mt-6">
|
||||
<div className="text-3xl">🐶</div>
|
||||
<div className="text-xl font-semibold">grafnode</div>
|
||||
<div>opensource API collection collaboration platform</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
style={{backgroundColor: '#8e44ad'}}
|
||||
className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
|
||||
onClick={handleClick}
|
||||
>
|
||||
Add Request
|
||||
</button>
|
||||
<div className="uppercase font-semibold create-request mt-6">Create Request</div>
|
||||
|
||||
<div className="flex mt-4 create-request-options">
|
||||
<div className="flex items-center mr-2 http">
|
||||
<span style={{color: '#1662c3'}}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span className="ml-2 name">Http</span>
|
||||
</div>
|
||||
<div className="flex items-center graphql" onClick={handleClick}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="26"
|
||||
width="26"
|
||||
viewBox="0 0 29.999 30"
|
||||
fill="#e10098"
|
||||
>
|
||||
<path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z"/>
|
||||
<path d="M2.727 20.53h24.538v1.272H2.727z"/>
|
||||
<path d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"/>
|
||||
<path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z"/>
|
||||
<path d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"/>
|
||||
<path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z"/>
|
||||
<path d="M27.985 22.5a2.68 2.68 0 0 1-3.654.981 2.68 2.68 0 0 1-.981-3.654 2.68 2.68 0 0 1 3.654-.981c1.287.743 1.724 2.375.98 3.654M6.642 10.174a2.68 2.68 0 0 1-3.654.981A2.68 2.68 0 0 1 2.007 7.5a2.68 2.68 0 0 1 3.654-.981 2.68 2.68 0 0 1 .981 3.654M2.015 22.5a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654 2.68 2.68 0 0 1-3.654-.981M15 30a2.674 2.674 0 1 1 2.674-2.673A2.68 2.68 0 0 1 15 30m0-24.652a2.67 2.67 0 0 1-2.674-2.674 2.67 2.67 0 1 1 5.347 0A2.67 2.67 0 0 1 15 5.347"/>
|
||||
</svg>
|
||||
<span className="ml-2 name">GraphQL</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="uppercase font-semibold create-request mt-8">Collections</div>
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center">
|
||||
<IconPlus size={18} strokeWidth={2}/><span className="ml-2">Create Collection</span>
|
||||
</div>
|
||||
<div className="flex items-center mt-2">
|
||||
<IconUpload size={18} strokeWidth={2}/><span className="ml-2">Import Collection</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</StyledWrapper>
|
||||
)
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user