From 5c2d61e8ddd047c0d2545db0072de24f085f0345 Mon Sep 17 00:00:00 2001 From: Rupin Khandelwal Date: Wed, 19 Oct 2022 16:52:03 -0500 Subject: [PATCH] Basic Layout for desktop and themes --- packages/web/pages/settings/integrations.tsx | 108 +++++++++++++++--- packages/web/public/static/icons/logseq.svg | 14 +++ packages/web/public/static/icons/readwise.svg | 9 ++ packages/web/public/static/icons/webhooks.svg | 9 ++ 4 files changed, 123 insertions(+), 17 deletions(-) create mode 100644 packages/web/public/static/icons/logseq.svg create mode 100644 packages/web/public/static/icons/readwise.svg create mode 100644 packages/web/public/static/icons/webhooks.svg diff --git a/packages/web/pages/settings/integrations.tsx b/packages/web/pages/settings/integrations.tsx index 6ac25eecb..eaea4b2fe 100644 --- a/packages/web/pages/settings/integrations.tsx +++ b/packages/web/pages/settings/integrations.tsx @@ -1,19 +1,29 @@ +import { useEffect, useState } from 'react' import { styled } from '@stitches/react' import { Toaster } from 'react-hot-toast' -import { Box, HStack, VStack } from '../../components/elements/LayoutPrimitives' +import { Plus } from 'phosphor-react' +import Image from 'next/image' + +import { + Box, + HStack, + SpanBox, + VStack, +} from '../../components/elements/LayoutPrimitives' import { PrimaryLayout } from '../../components/templates/PrimaryLayout' import { applyStoredTheme } from '../../lib/themeUpdater' +import { Button } from '../../components/elements/Button' // Styles const Header = styled(Box, { - width: '100%', + //width: '100%', color: '$utilityTextDefault', fontSize: 'x-large', margin: '10px', }) const Para = styled(Box, { - width: '100%', + //width: '100%', padding: '20px', color: '$utilityTextDefault', borderBottom: '0.5px solid $utilityTextDefault', @@ -22,14 +32,22 @@ const Para = styled(Box, { const IntegrationsCard = styled(Box, { width: '100%', borderRadius: '5px', - height: '100px', backgroundColor: '$grayBg', + margin: '10px 0', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', }) -const IntegrationBrand = styled(Box, { - height: '100%', - border: '1px solid green', - width: '10%', +const IntegrationContent = styled(Box, { + width: '60%', + minWidth: '200px', + padding: '10px', + color: '$utilityTextDefault', + m: '10px', + 'h3, p': { + margin: '0', + }, }) //interface @@ -46,6 +64,33 @@ type integrationsCard = { export default function Integrations(): JSX.Element { applyStoredTheme(false) + const [integrationsArray, setIntegrationsArray] = useState( + Array() + ) + + useEffect(() => { + setIntegrationsArray([ + { + icon: '/static/icons/logseq.svg', + title: 'Logseq', + subText: 'Organize your personal knowledge base', + button: 'install Logseq Plugin', + }, + { + icon: '/static/icons/readwise.svg', + title: 'ReadWise', + subText: 'Synchronize ebooks & articles from Readwise account', + button: 'Connect to Readwise', + }, + { + icon: '/static/icons/webhooks.svg', + title: 'Webhooks', + subText: '## Webhooks', + button: 'View Webhooks', + }, + ]) + }, []) + return ( - +
Integrations
 - + Connect with other applications can help enhance and streamline your experience with Omnivore, below are some useful apps to connect your @@ -65,19 +110,48 @@ export default function Integrations(): JSX.Element {
Applications
- {/* create an integration array with integration props and loop over it */} - - - + {integrationsArray.map((item) => { + return ( + + integration Image + +

{item.title}

+

{item.subText}

+ + + + ) + })} ) diff --git a/packages/web/public/static/icons/logseq.svg b/packages/web/public/static/icons/logseq.svg new file mode 100644 index 000000000..9aaf43643 --- /dev/null +++ b/packages/web/public/static/icons/logseq.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/web/public/static/icons/readwise.svg b/packages/web/public/static/icons/readwise.svg new file mode 100644 index 000000000..d40b7fa81 --- /dev/null +++ b/packages/web/public/static/icons/readwise.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/web/public/static/icons/webhooks.svg b/packages/web/public/static/icons/webhooks.svg new file mode 100644 index 000000000..81377821e --- /dev/null +++ b/packages/web/public/static/icons/webhooks.svg @@ -0,0 +1,9 @@ + + + + + + + + +