Skip to content

Commit f27976a

Browse files
fatonramadanifatonramadani
authored
Made solutions pages responsive (windmill-labs#300)
1 parent ea6bfff commit f27976a

File tree

4 files changed

+318
-452
lines changed

4 files changed

+318
-452
lines changed

‎src/components/Solutions.tsx

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from 'react';
2+
import LandingSection from '../landing/LandingSection';
3+
import LandingHeader from '../landing/LandingHeader';
4+
import Footer from '../landing/Footer';
5+
import { ArrowRight } from 'lucide-react';
6+
import LayoutProvider from '@theme/Layout/Provider';
7+
import { Helmet } from 'react-helmet-async';
8+
import { useColorMode } from '@docusaurus/theme-common';
9+
10+
function Screenshot({ darkScreenshot, lightScreenshot }) {
11+
const { colorMode } = useColorMode();
12+
const screenshot = colorMode === 'dark' ? darkScreenshot : lightScreenshot;
13+
14+
return <img src={screenshot} className="w-full rounded-lg" />;
15+
}
16+
17+
export default function Solution({
18+
data,
19+
name,
20+
color,
21+
extraBlock
22+
}: {
23+
data: any;
24+
name: string;
25+
color: string;
26+
extraBlock?: React.ReactNode;
27+
}) {
28+
return (
29+
<LayoutProvider>
30+
<main>
31+
<Helmet>
32+
<title>{name} | Windmill</title>
33+
<meta name={data.title} content={data.subtitle} />
34+
<meta name={data.title} content={data.subtitle} />
35+
</Helmet>
36+
<LandingHeader />
37+
38+
<LandingSection bgClass="relative">
39+
<div className="max-w-6xl mx-auto px-4 sm:px-6">
40+
<div className="py-12 md:py-20">
41+
<div className=" pb-12 md:pb-20">
42+
<h1
43+
className="leading-10 mb-2 !text-4xl text-gray-900 dark:text-white"
44+
style={{
45+
color: color
46+
}}
47+
>
48+
{data.title}
49+
</h1>
50+
<p className="text-md text-gray-600 dark:text-gray-400">{data.subtitle}</p>
51+
</div>
52+
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
53+
<div className="flex items-start flex-col justify-center gap-6">
54+
<div className="text-lg font-normal text-gray-800 dark:text-gray-200">
55+
{data.description}
56+
</div>
57+
<div className="flex flex-row gap-2">
58+
<a
59+
type="button"
60+
tag="no_follow"
61+
href="https://app.windmill.dev/user/login"
62+
target="_blank"
63+
className="flex items-center gap-2 rounded-md bg-[#4285F4] px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
64+
>
65+
Start building with {name}
66+
<ArrowRight className="" aria-hidden="true" />
67+
</a>
68+
<a
69+
type="button"
70+
href={`/docs/integrations/${name}`}
71+
target="_blank"
72+
className="flex items-center gap-2 rounded-md bg-blue-50 px-4 py-2 text-sm font-semibold text-gray-900 hover:text-gray-900 hover:bg-blue-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
73+
>
74+
Documentation
75+
<ArrowRight className="" aria-hidden="true" />
76+
</a>
77+
</div>
78+
</div>
79+
<div className="w-full">
80+
<Screenshot
81+
lightScreenshot={data.lightScreenshot}
82+
darkScreenshot={data.darkScreenshot}
83+
/>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div className="py-12 md:py-20">
89+
<h2 className="leading-8 mb-8">
90+
<p>
91+
Scripts for
92+
<span style={{ color }}> {name}</span>
93+
</p>
94+
<p className="text-sm font-normal text-gray-500 dark:text-gray-400">
95+
{data.integrations_sub_title}
96+
</p>
97+
</h2>
98+
<div className="mx-auto w-full">
99+
<dl className="grid grid-cols-1 lg:grid-cols-3 border border-gray-50 dark:border-gray-900">
100+
{data.hubIntegrations.map((integration) => (
101+
<div
102+
key={integration.title}
103+
className="flex flex-col border p-8 hover:bg-gray-50 border-gray-50 dark:border-gray-900 dark:hover:bg-gray-800"
104+
>
105+
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark:text-white">
106+
<integration.icon
107+
className="h-5 w-5 flex-none text-blue-600"
108+
aria-hidden="true"
109+
/>
110+
{integration.title}
111+
</dt>
112+
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-200">
113+
<p className="flex-auto">{integration.description}</p>
114+
<p className="mt-6">
115+
<a
116+
href={integration.link}
117+
target="_blank"
118+
className="text-base font-semibold leading-7 text-blue-600"
119+
>
120+
View on the Hub <span aria-hidden="true">→</span>
121+
</a>
122+
</p>
123+
</dd>
124+
</div>
125+
))}
126+
</dl>
127+
</div>
128+
129+
{extraBlock}
130+
</div>
131+
</div>
132+
</LandingSection>
133+
<Footer />
134+
</main>
135+
</LayoutProvider>
136+
);
137+
}

‎src/pages/solutions/airtable.tsx

Lines changed: 40 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,185 +1,88 @@
11
import React from 'react';
2-
import LandingSection from '../../landing/LandingSection';
3-
import LandingHeader from '../../landing/LandingHeader';
4-
import Footer from '../../landing/Footer';
5-
import { ArrowRight, PlusSquareIcon, CopyIcon, ArrowLeftCircleIcon, ListIcon, RefreshCcwIcon, DeleteIcon } from 'lucide-react';
6-
import LayoutProvider from '@theme/Layout/Provider';
7-
import { Helmet } from 'react-helmet-async';
8-
import { useColorMode } from '@docusaurus/theme-common';
92

10-
11-
function Screenshot({darkScreenshot, lightScreenshot}) {
12-
const { colorMode } = useColorMode();
13-
const screenshot = colorMode === 'dark' ? darkScreenshot :lightScreenshot
14-
15-
return (
16-
<img
17-
src={screenshot}
18-
className="w-full rounded-lg"
19-
/>
20-
)
21-
}
3+
import {
4+
PlusSquareIcon,
5+
CopyIcon,
6+
ArrowLeftCircleIcon,
7+
ListIcon,
8+
RefreshCcwIcon,
9+
DeleteIcon
10+
} from 'lucide-react';
11+
import Solution from '../../components/Solutions';
2212

2313
export default function Content() {
2414
const color = '#E9B13D';
25-
const name = "Airtable"
26-
const website = "https://www.airtable.com/"
15+
const name = 'Airtable';
16+
const website = 'https://www.airtable.com/';
2717
const windmill_color = '#4E80EE';
2818

2919
const data = {
3020
title: `Build internal tools with ${name}`,
3121
subtitle: `Windmill unlocks your creation of internal tools with ${name}. From scripts, build admin panels, BI dashboards, workflows, and more.`,
3222
description: (
33-
<div className="flex flex-col gap-4">
34-
<p>
35-
<a href={website} target="_blank">
36-
<strong><span style={{ color }}>{name}</span></strong>
37-
</a> is a comprehensive inbound marketing, sales, and CRM platform.
38-
</p>
39-
<p>Connecting Windmill to <span> {name}</span> takes a few seconds and lets you build internal tools from it and integrate with any other platform.</p>
40-
<p>From scripts supported in multiple languages, build UIs and flows that you can monitor and trigger on demand, by schedule or webhooks.</p>
41-
</div>
23+
<div className="flex flex-col gap-4">
24+
<p>
25+
<a href={website} target="_blank">
26+
<strong>
27+
<span style={{ color }}>{name}</span>
28+
</strong>
29+
</a>{' '}
30+
is a comprehensive inbound marketing, sales, and CRM platform.
31+
</p>
32+
<p>
33+
Connecting Windmill to <span> {name}</span> takes a few seconds and lets you build
34+
internal tools from it and integrate with any other platform.
35+
</p>
36+
<p>
37+
From scripts supported in multiple languages, build UIs and flows that you can monitor and
38+
trigger on demand, by schedule or webhooks.
39+
</p>
40+
</div>
4241
),
4342
darkScreenshot: '/integrations/solutions_dark.png',
4443
lightScreenshot: '/integrations/solutions_light.png',
4544
documentationLink: 'https://docs.windmillui.com/',
46-
message_postgres: (
47-
<div className="flex flex-col gap-4">
48-
<p>Windmill also supports <a href="/docs/getting_started/scripts_quickstart/sql" target="_blank">
49-
<strong><span style={{ windmill_color }}>PostgreSQL</span></strong>
50-
</a> as a language. For
51-
<span> { name}</span>, this means you can connect your database via the Postgres protocol and execute any SQL query from your internal tools.
52-
</p>
53-
</div>
54-
),
45+
5546
integrations_sub_title: `Write any script, flow or app targeting ${name} API, or pick them from WindmillHub community library.`,
5647
hubIntegrations: [
5748
{
5849
title: 'Create Single Record',
5950
link: 'https://hub.windmill.dev/scripts/airtable/302/create-single-record-airtable',
60-
description: "Add a new record to an Airtable base.",
51+
description: 'Add a new record to an Airtable base.',
6152
icon: PlusSquareIcon
6253
},
6354
{
6455
title: 'Create Multiple Records',
65-
description: "Add multiple new records to an Airtable base.",
56+
description: 'Add multiple new records to an Airtable base.',
6657
link: 'https://hub.windmill.dev/scripts/airtable/298/create-multiple-records-airtable',
6758
icon: CopyIcon
6859
},
6960
{
7061
title: 'Get Record',
7162
link: 'https://hub.windmill.dev/scripts/airtable/303/get-record-airtable',
72-
description: "Retrieve a specific record from an Airtable base.",
63+
description: 'Retrieve a specific record from an Airtable base.',
7364
icon: ArrowLeftCircleIcon
7465
},
7566
{
7667
title: 'List Records',
7768
link: 'https://hub.windmill.dev/scripts/airtable/300/list-records-airtable',
78-
description: "List all or specific records from an Airtable base.",
69+
description: 'List all or specific records from an Airtable base.',
7970
icon: ListIcon
8071
},
8172
{
8273
title: 'Update record',
8374
link: 'https://hub.windmill.dev/scripts/airtable/301/update-record-airtable',
84-
description: "Update a specific record in an Airtable base.",
75+
description: 'Update a specific record in an Airtable base.',
8576
icon: RefreshCcwIcon
8677
},
8778
{
8879
title: 'Delete Record',
8980
link: 'https://hub.windmill.dev/scripts/airtable/304/delete-record-airtable',
90-
description: "Remove a record from an Airtable base.",
81+
description: 'Remove a record from an Airtable base.',
9182
icon: DeleteIcon
92-
},
93-
]
83+
}
84+
]
9485
};
9586

96-
return (
97-
<LayoutProvider>
98-
<main>
99-
<Helmet>
100-
<title>{name} | Windmill</title>
101-
<meta name={data.title} content={data.subtitle} />
102-
<meta name={data.title} content={data.subtitle} />
103-
</Helmet>
104-
<LandingHeader />
105-
<LandingSection bgClass="relative">
106-
<div className="max-w-6xl mx-auto px-4 sm:px-6">
107-
<div className="py-12 md:py-20">
108-
<div className=" pb-12 md:pb-20">
109-
<h1
110-
className="leading-10 mb-2 !text-4xl text-gray-900 dark:text-white"
111-
style={{
112-
color: color
113-
}}
114-
>
115-
{data.title}
116-
</h1>
117-
<p className="text-md text-gray-600 dark:text-gray-400">{data.subtitle}</p>
118-
</div>
119-
<div className="grid grid-cols-2 gap-2">
120-
<div className="flex items-start flex-col justify-center gap-6">
121-
<div className="text-lg font-normal text-gray-800 dark:text-gray-200">{data.description}</div>
122-
<div className="flex flex-row gap-2">
123-
<a
124-
type="button"
125-
tag="no_follow"
126-
href="https://app.windmill.dev/user/login"
127-
target="_blank"
128-
className="flex items-center gap-2 rounded-md bg-[#4285F4] px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
129-
>
130-
Start building with {name}
131-
<ArrowRight className="" aria-hidden="true" />
132-
</a>
133-
<a
134-
type="button"
135-
href={`/docs/integrations/${name}`}
136-
target="_blank"
137-
className="flex items-center gap-2 rounded-md bg-blue-50 px-4 py-2 text-sm font-semibold text-gray-900 hover:text-gray-900 hover:bg-blue-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
138-
>
139-
Documentation
140-
<ArrowRight className="" aria-hidden="true" />
141-
</a>
142-
</div>
143-
</div>
144-
<div className="w-full">
145-
<Screenshot lightScreenshot={data.lightScreenshot} darkScreenshot={data.darkScreenshot}/>
146-
</div>
147-
</div>
148-
</div>
149-
150-
151-
<div className="py-12 md:py-20">
152-
<h2 className="leading-8 mb-8">
153-
<p> Scripts for
154-
<span style={{color}}> { name}</span>
155-
</p>
156-
<p className="text-base font-normal text-gray-500 dark:text-gray-400">{data.integrations_sub_title}</p>
157-
</h2>
158-
<div className="grid grid-cols-3 gap-8 grid-rows-8">
159-
{data.hubIntegrations.map((integration) => (
160-
<div>
161-
<div className="bg-blue-100 text-blue-900 rounded-full p-2 w-8">
162-
<integration.icon size={16} />
163-
</div>
164-
<div className="font-semibold leading-6 text-sm text-gray-700 dark:text-white">{integration.title}</div>
165-
<div className="text-sm text-gray-700 dark:text-white"> {integration.description} </div>
166-
<a
167-
type="button"
168-
href={integration.link}
169-
target="_blank"
170-
className="rounded py-1 text-xs font-semibold text-gray-400 hover:text-blue-800 flex flex-row gap-2 dark:text-gray-400"
171-
>
172-
View on the Hub
173-
<ArrowRight size={16} className="" aria-hidden="true" />
174-
</a>
175-
</div>
176-
))}
177-
</div>
178-
</div>
179-
</div>
180-
</LandingSection>
181-
<Footer />
182-
</main>
183-
</LayoutProvider>
184-
);
185-
}
87+
return <Solution data={data} name={name} color={color} />;
88+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy