Skip to content

fix(www): analytics bento code snippet is not readable #2311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chronark merged 2 commits into from
Oct 12, 2024
Merged

fix(www): analytics bento code snippet is not readable #2311

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77bbd42
fix(www): analytics bento code snippet is not readable
unrenamed Oct 10, 2024
716f6cc
Merge branch 'unkeyed:main' into fix/analytics-code-snippets-not-read…
unrenamed Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 39 additions & 14 deletions apps/www/components/analytics/analytics-bento.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,22 @@ export function AnalyticsBento() {
<PrimaryButton shiny label="Show API code" IconLeft={Wand2} />
</button>
</div>

<div className="relative mt-[80px] w-full h-[640px] analytics-linear-gradient flex justify-center xl:justify-start items-end rounded-3xl border border-white/10">
<div
className={cn(
"group relative mt-[80px] w-full h-[640px] analytics-linear-gradientborder border-white/10",
"flex justify-center xl:justify-start items-end rounded-3xl",
)}
>
{/* TODO: horizontal scroll */}
<LightSvg className="absolute hidden md:flex top-[-180px] left:0 lg:left-[300px] z-50 pointer-events-none" />
<LightSvg className="absolute hidden md:flex top-[-180px] left-0 lg:left-[300px] z-50 pointer-events-none" />
<AnalyticsStars className="w-[90px] shrink-0 hidden md:flex" />
{showApi ? <AnalyticsApiView /> : <AnalyticsWebAppView />}
<BentoText />
<div className="absolute inset-0 w-full h-full duration-500 pointer-events-none bg-gradient-to-t from-black from-10% via-black/50 to-transparent group-hover:opacity-0 group-hover:backdrop-blur-0" />
<BentoText
className={
showApi ? "group-hover:opacity-0 group-hover:pointer-events-none duration-500" : ""
}
/>
</div>
</div>
);
Expand Down Expand Up @@ -189,24 +198,30 @@ function AnalyticsApiView() {
exit={{ opacity: 0 }}
transition={{ duration: 0.2, ease: "easeInOut" }}
whileInView="visible"
className="w-full overflow-x-hidden"
className="w-full overflow-x-hidden relative"
>
<div className="w-full analytics-background-gradient bg-black bg-opacity-02 lg:rounded-3xl xxl:mr-10 overflow-x-hidden overflow-y-hidden border-white/10 border border-b-0 border-l-0 border-r-0 flex-col md:flex-row relative rounded-tl-3xl h-[600px] xl:h-[576px] flex">
<CopyCodeSnippetButton
textToCopy={languagesList[language].codeBlock}
className="sticky right-12 top-16 float-right hidden cursor-pointer lg:flex"
/>
<div
className={cn(
"w-full bg-black bg-opacity-02 lg:rounded-3xl xxl:mr-10",
"border-white/10 border border-b-0 border-l-0 border-r-0",
"flex flex-col md:flex-row rounded-tl-3xl h-[600px] xl:h-[576px]",
)}
>
<LanguageSwitcher
languages={Object.values(languagesList)}
currentLanguage={language}
setLanguage={setLanguage}
/>
<div className="flex pt-4 pb-8 pl-8 font-mono text-xs text-white sm:text-sm">
<div className="flex pt-4 pb-8 pl-8 overflow-x-hidden scrollbar-hidden font-mono text-xs text-white sm:text-sm">
<CodeEditor
theme={theme}
codeBlock={languagesList[language].codeBlock}
language={languagesList[language].editorLanguage}
/>
<CopyCodeSnippetButton
textToCopy={languagesList[language].codeBlock}
className="absolute hidden cursor-pointer top-5 right-5 lg:flex"
/>
</div>
</div>
</motion.div>
Expand All @@ -223,7 +238,12 @@ function LanguageSwitcher({
setLanguage: React.Dispatch<React.SetStateAction<LanguageName>>;
}) {
return (
<div className="flex flex-col w-[216px] text-white text-sm pt-6 px-4 font-mono md:border-r md:border-white/5">
<div
className={cn(
"flex flex-col w-[216px] text-white text-sm pt-6 px-4 font-mon",
"md:border-r md:border-white/5 overflow-x-hidden scrollbar-hidden",
)}
>
<div className="flex items-center space-x-2 sm:flex-col sm:space-x-0 sm:space-y-2">
{languages.map(({ Icon, name }) => (
<button
Expand Down Expand Up @@ -796,9 +816,14 @@ function AnalyticsWebAppView() {
);
}

export function BentoText() {
export function BentoText({ className }: { className?: string }) {
return (
<div className="flex flex-col text-white absolute left-[20px] sm:left-[40px] xl:left-[40px] bottom-[40px] max-w-[286px]">
<div
className={cn(
"flex flex-col text-white absolute left-[20px] sm:left-[40px] xl:left-[40px] bottom-[40px] max-w-[286px]",
className,
)}
>
<div className="flex items-center w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down