Skip to content

Commit

Permalink
improve styling in aboutcompany
Browse files Browse the repository at this point in the history
  • Loading branch information
@dphuang2
dphuang2 committed Mar 18, 2024
1 parent b2f5050 commit 931d019
Showing 1 changed file with 91 additions and 93 deletions.
184 changes: 91 additions & 93 deletions generator/konfig-docs/src/components/SdkNew.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@
* For an explanation of the new pSEO page, see the ticket here:
* https://www.notion.so/konfigthis/Restructure-pSEO-pages-based-on-Zapier-5ff64f53351a4ae2bf728e338b56e57d?pvs=4
*/
import React, { useEffect, useState } from 'react'
import { Sdk, SdkMethod } from './Sdk'
import Layout from '@theme/Layout'
import Head from '@docusaurus/Head'
import React, { useEffect, useState } from "react";
import { Sdk, SdkMethod } from "./Sdk";
import Layout from "@theme/Layout";
import Head from "@docusaurus/Head";
import {
IconArrowsDownUp,
IconExternalLink,
IconPencil,
} from '@tabler/icons-react'
import { TsIcon } from './TsIcon'
import { useSdkSignup } from '../util/use-sdk-signup'
import clsx from 'clsx'
import { LoadingIcon } from './LoadingIcon'
import { Method } from './SdkComponentProps'
import { Breadcrumbs } from './Breadcrumbs'
import { LogoBox } from './LogoBox'
import useContentLoaded from '../util/use-content-loaded'
import { HowKonfigWorks } from './HowKonfigWorks'
} from "@tabler/icons-react";
import { TsIcon } from "./TsIcon";
import { useSdkSignup } from "../util/use-sdk-signup";
import clsx from "clsx";
import { LoadingIcon } from "./LoadingIcon";
import { Method } from "./SdkComponentProps";
import { Breadcrumbs } from "./Breadcrumbs";
import { LogoBox } from "./LogoBox";
import useContentLoaded from "../util/use-content-loaded";
import { HowKonfigWorks } from "./HowKonfigWorks";

type InputPropsFromOriginalSdkComponent = React.ComponentProps<typeof Sdk>
type InputPropsFromOriginalSdkComponent = React.ComponentProps<typeof Sdk>;

export function SdkNew({
serviceName,
Expand All @@ -45,17 +45,17 @@ export function SdkNew({
companyKebabCase,
}: InputPropsFromOriginalSdkComponent) {
const serviceNameSubstring =
serviceName !== undefined ? ` ${serviceName}` : ''
const description = `Explore the ${company}${serviceNameSubstring} TypeScript SDK. Discover SDK ${methods.length} methods to integrate ${company}'s${serviceNameSubstring} API into your application.`
serviceName !== undefined ? ` ${serviceName}` : "";
const description = `Explore the ${company}${serviceNameSubstring} TypeScript SDK. Discover SDK ${methods.length} methods to integrate ${company}'s${serviceNameSubstring} API into your application.`;
if (FirstRequest === undefined) {
throw new Error(
"FirstRequest is required for the SdkNew component. It is used to render the 'MakeYourFirstRequest' section.",
)
"FirstRequest is required for the SdkNew component. It is used to render the 'MakeYourFirstRequest' section."
);
}
if (categories === undefined) {
throw new Error('categories is required for the SdkNew component')
throw new Error("categories is required for the SdkNew component");
}
const title = `Integrate ${company}'s${serviceNameSubstring} API using Konfig's ${language} SDK`
const title = `Integrate ${company}'s${serviceNameSubstring} API using Konfig's ${language} SDK`;
/*
Easily Integrate
<br />
Expand Down Expand Up @@ -117,7 +117,7 @@ Easily Integrate
serviceNameSubString={serviceNameSubstring}
/>
</Layout>
)
);
}

function BottomCTA({
Expand All @@ -126,10 +126,10 @@ function BottomCTA({
serviceName,
serviceNameSubString,
}: {
company: string
language: string
serviceName?: string
serviceNameSubString?: string
company: string;
language: string;
serviceName?: string;
serviceNameSubString?: string;
}) {
return (
<div className="py-32 px-8 md:px-48 bg-gradient-to-tl from-[var(--ifm-color-primary-darkest)] to-[var(--ifm-color-primary)]">
Expand All @@ -145,7 +145,7 @@ function BottomCTA({
doNotShowQuestion
/>
</div>
)
);
}

export function AboutCompany({
Expand All @@ -157,13 +157,13 @@ export function AboutCompany({
openApiGitHubUi,
developerDocumentation,
}: {
company: string
logo: string
metaDescription: string
homepage: string
categories: string[]
openApiGitHubUi?: string
developerDocumentation?: string
company: string;
logo: string;
metaDescription: string;
homepage: string;
categories: string[];
openApiGitHubUi?: string;
developerDocumentation?: string;
}) {
return (
<div className="py-20 px-8 md:px-32 bg-white">
Expand All @@ -178,10 +178,10 @@ export function AboutCompany({
<h2 className="mt-4 mb-0 text-3xl text-slate-800">About {company}</h2>
<p className="mt-2 max-w-[800px]">{metaDescription}</p>
</div>
<div className="mt-4 flex gap-2">
<div className="mt-4 flex gap-2 flex-wrap">
<ExternalLinkButton label={homepage} url={homepage} />
{openApiGitHubUi && (
<ExternalLinkButton label={'OpenAPI'} url={openApiGitHubUi} />
<ExternalLinkButton label={"OpenAPI"} url={openApiGitHubUi} />
)}
{developerDocumentation && (
<ExternalLinkButton
Expand All @@ -197,29 +197,33 @@ export function AboutCompany({
return (
<button
key={category}
className="z-10 flex items-center gap-1 border font-medium rounded-md px-2 py-1 transition-all bg-slate-50 hover:bg-slate-100 border-slate-300 text-slate-600 hover:text-slate-800"
className="z-10 flex text-sm lg:text-base items-center gap-1 border font-medium rounded-md px-2 py-1 transition-all bg-slate-50 hover:bg-slate-100 border-slate-300 text-slate-600 hover:text-slate-800"
>
<span>{category}</span>
</button>
)
);
})}
</div>
</div>
</div>
)
);
}

function ExternalLinkButton({ url, label }: { url: string; label: string }) {
const withHttps = url.startsWith('https://') ? url : `https://${url}`
const withoutHttps = label.startsWith('https://') ? label.slice(8) : label
const withHttps = url.startsWith("https://") ? url : `https://${url}`;
const withoutHttps = label.startsWith("https://") ? label.slice(8) : label;
return (
<a href={withHttps} className="hover:no-underline" target="_blank">
<a
href={withHttps}
className="hover:no-underline text-sm lg:text-base"
target="_blank"
>
<button className="border hover:shadow-xl hover:bg-blue-50 border-blue-700 text-blue-700 transition-all hover:border-blue-900 hover:text-blue-900 rounded-md px-2 py-1 items-center flex gap-2">
<span className="font-semibold">{withoutHttps}</span>
<span className="font-semibold whitespace-nowrap">{withoutHttps}</span>
<IconExternalLink className="h-5" />
</button>
</a>
)
);
}

function MakeYourFirstRequest({
Expand All @@ -231,17 +235,17 @@ function MakeYourFirstRequest({
methods,
clientNameCamelCase,
}: {
GettingStarted: React.ComponentType
FirstRequest: React.ComponentType
company: string
serviceNameSubstring?: string
language: string
methods: Method[]
clientNameCamelCase: string
GettingStarted: React.ComponentType;
FirstRequest: React.ComponentType;
company: string;
serviceNameSubstring?: string;
language: string;
methods: Method[];
clientNameCamelCase: string;
}) {
const [amountToShow, setAmountToShow] = useState(6)
const numberOfMethods = methods.length
methods = methods.slice(0, amountToShow)
const [amountToShow, setAmountToShow] = useState(6);
const numberOfMethods = methods.length;
methods = methods.slice(0, amountToShow);
return (
<div className="bg-white pt-10 pb-20 px-3">
<h2 className="text-2xl mb-0 sm:text-3xl text-slate-800 text-center font-bold">
Expand Down Expand Up @@ -273,12 +277,12 @@ function MakeYourFirstRequest({
<div key={i} className="h-fit">
<SdkMethod {...{ ...method, company, clientNameCamelCase }} />
</div>
)
);
})}
</div>
<button
onClick={() => {
setAmountToShow((amount) => amount + 6)
setAmountToShow((amount) => amount + 6);
}}
aria-hidden={amountToShow >= numberOfMethods}
className="aria-hidden:hidden mt-4 mx-auto group flex gap-3 hover:gap-2 items-center transition-all bg-gradient-to-br text-white w-fit text-center font-semibold px-3 py-2 from-blue-600 to-blue-800 rounded-md text-1xl"
Expand All @@ -287,7 +291,7 @@ function MakeYourFirstRequest({
</button>
</div>
</div>
)
);
}

function TrustedBy() {
Expand Down Expand Up @@ -315,7 +319,7 @@ function TrustedBy() {
</div>
</div>
</div>
)
);
}

function HeroSection({
Expand All @@ -325,16 +329,16 @@ function HeroSection({
serviceName,
logo,
}: {
language: string
company: string
serviceName?: string
serviceNameSubstring?: string
logo: string
language: string;
company: string;
serviceName?: string;
serviceNameSubstring?: string;
logo: string;
}) {
const [showGraphic, setShowGraphic] = useState(false)
const [showGraphic, setShowGraphic] = useState(false);
useContentLoaded(() => {
setShowGraphic(true)
})
setShowGraphic(true);
});
return (
<div className="mx-auto max-w-[375px] px-3 sm:max-w-none sm:px-8 lg:px-20 py-12">
<div className="mx-auto flex flex-col items-center sm:max-w-[625px] lg:max-w-none lg:flex-row gap-2 lg:gap-20">
Expand All @@ -343,9 +347,9 @@ function HeroSection({
Easily Integrate
<br />
<span className="text-white">
{' '}
{company}'s{serviceNameSubstring} API{' '}
</span>{' '}
{" "}
{company}'s{serviceNameSubstring} API{" "}
</span>{" "}
using <span className="text-white">Konfig's {language} SDK</span>
</h1>
<SignupForm
Expand Down Expand Up @@ -378,7 +382,7 @@ function HeroSection({
</div>
</div>
</div>
)
);
}

function SignupForm({
Expand All @@ -389,25 +393,19 @@ function SignupForm({
doNotShowQuestion,
bottomCTA,
}: {
company: string
serviceName?: string
language: string
serviceNameSubString?: string
doNotShowQuestion?: boolean
bottomCTA?: boolean
company: string;
serviceName?: string;
language: string;
serviceNameSubString?: string;
doNotShowQuestion?: boolean;
bottomCTA?: boolean;
}) {
const {
setEmail,
signedUp,
signedUpEmail,
loading,
handleSubmit,
email,
} = useSdkSignup({
company,
serviceName,
language,
})
const { setEmail, signedUp, signedUpEmail, loading, handleSubmit, email } =
useSdkSignup({
company,
serviceName,
language,
});

return (
<form
Expand All @@ -421,10 +419,10 @@ function SignupForm({
<h2
data-bottom={bottomCTA}
className={clsx(
'text-base md:text-lg text-blue-900 data-[bottom=true]:text-white font-bold',
"text-base md:text-lg text-blue-900 data-[bottom=true]:text-white font-bold",
{
'mb-3': !signedUp,
},
"mb-3": !signedUp,
}
)}
>
{signedUp
Expand All @@ -442,7 +440,7 @@ function SignupForm({
data-bottom={bottomCTA}
className="mb-0 data-[bottom=true]:text-white"
>
For inquiries or support, please contact us at{' '}
For inquiries or support, please contact us at{" "}
<a
data-bottom={bottomCTA}
href="mailto:[email protected]"
Expand Down Expand Up @@ -485,5 +483,5 @@ function SignupForm({
)}
</div>
</form>
)
);
}

0 comments on commit 931d019

Please sign in to comment.