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"))
+ }
+ >
+
+ Import CSV
+
+ dispatch(actions.console.setActiveSidebar("create"))}
+ >
+
+ 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"))
- }
- >
-
- Import CSV
-
-
- dispatch(actions.console.setActiveSidebar("create"))
- }
- >
-
- Create table
-
-
-
- Get $200 in free credits when you sign up for{" "}
-
- QuestDB Cloud
-
- .
- No credit card required.
-
-
-
+ {tables.length <= 2 && }
)
}