diff --git a/packages/web-console/src/modules/ZeroState/start.tsx b/packages/web-console/src/modules/ZeroState/start.tsx new file mode 100644 index 000000000..666f81d49 --- /dev/null +++ b/packages/web-console/src/modules/ZeroState/start.tsx @@ -0,0 +1,107 @@ +import React from "react" +import styled from "styled-components" +import { bezierTransition, Text } from "../../components" +import { Box, Heading } from "@questdb/react-components" +import { actions } from "../../store" +import { useDispatch } from "react-redux" + +const Items = styled.div` + display: grid; + grid-auto-flow: row; + grid-auto-columns: max-content; + gap: 4rem; + text-align: center; + justify-items: center; +` + +const StyledHeading = styled(Heading)` + color: ${({ theme }) => theme.color.foreground}; +` + +const StyledText = styled(Text)` + line-height: 1.75; + + a { + color: ${({ theme }) => theme.color.gray2}; + } +` + +const Actions = styled.div` + display: grid; + gap: 2rem; + grid-template-columns: repeat(2, 1fr); +` + +const Action = styled(Box).attrs({ flexDirection: "column", gap: "2rem" })` + padding: 2rem; + border-radius: ${({ theme }) => theme.borderRadius}; + background: #2c2e3d; + cursor: pointer; + + &, + &:hover { + ${bezierTransition}; + } + + > * { + opacity: 0.8; + } + + &:hover { + background: #3f4252; + + > * { + opacity: 1; + } + } +` + +export const Start = () => { + const dispatch = useDispatch() + + return ( + + + Enter a query and press Run to view results. + + + + dispatch(actions.console.setActiveBottomPanel("import")) + } + > + File upload icon + Import CSV + + dispatch(actions.console.setActiveSidebar("create"))} + > + Create table icon + Create table + + + + Get $200 in free credits when you sign up for{" "} + + QuestDB Cloud + + .
+ No credit card required. +
+
+ ) +} diff --git a/packages/web-console/src/scenes/Console/zero-state.tsx b/packages/web-console/src/scenes/Console/zero-state.tsx index 12345d987..b7a6f4d79 100644 --- a/packages/web-console/src/scenes/Console/zero-state.tsx +++ b/packages/web-console/src/scenes/Console/zero-state.tsx @@ -1,124 +1,21 @@ import React from "react" import styled from "styled-components" -import { - bezierTransition, - PaneContent, - PaneWrapper, - Text, -} from "../../components" -import { Box, Heading } from "@questdb/react-components" -import { actions } from "../../store" -import { useDispatch } from "react-redux" +import { selectors } from "../../store" +import { Start } from "../../modules/ZeroState/start" +import { useSelector } from "react-redux" +import { PaneContent, PaneWrapper } from "../../components" const StyledPaneContent = styled(PaneContent)` align-items: center; justify-content: center; ` -const Items = styled.div` - display: grid; - grid-auto-flow: row; - grid-auto-columns: max-content; - gap: 4rem; - text-align: center; - justify-items: center; -` - -const StyledHeading = styled(Heading)` - color: ${({ theme }) => theme.color.foreground}; -` - -const StyledText = styled(Text)` - line-height: 1.75; - - a { - color: ${({ theme }) => theme.color.gray2}; - } -` - -const Actions = styled.div` - display: grid; - gap: 2rem; - grid-template-columns: repeat(2, 1fr); -` - -const Action = styled(Box).attrs({ flexDirection: "column", gap: "2rem" })` - padding: 2rem; - border-radius: ${({ theme }) => theme.borderRadius}; - background: #2c2e3d; - cursor: pointer; - - &, - &:hover { - ${bezierTransition}; - } - - > * { - opacity: 0.8; - } - - &:hover { - background: #3f4252; - - > * { - opacity: 1; - } - } -` - export const ZeroState = () => { - const dispatch = useDispatch() + const tables = useSelector(selectors.query.getTables) return ( - - - - Enter a query and press Run to view - results. - - - - dispatch(actions.console.setActiveBottomPanel("import")) - } - > - File upload icon - Import CSV - - - dispatch(actions.console.setActiveSidebar("create")) - } - > - Create table icon - Create table - - - - Get $200 in free credits when you sign up for{" "} - - QuestDB Cloud - - .
- No credit card required. -
-
-
+ {tables.length <= 2 && }
) }