Skip to content

Commit e1947d9

Browse files
bring-shrubberybring-shrubbery
committed
WIP: Making images resize and stuff
1 parent 07c3871 commit e1947d9

13 files changed

+318
-90
lines changed

‎apps/web/app/page.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,21 @@ import { FeaturesSection } from "./sections/FeaturesSection";
66
import { HowItWorksSection } from "./sections/HowItWorksSection";
77
import { LicenseSection } from "./sections/LicenseSection";
88
import { LinksSection } from "./sections/LinksSection";
9+
import { UsageSectionReactContent } from "./sections/UsageSectionReactContent";
10+
import { ExampleSectionConstantSizeExample } from "./sections/ExamplesSectionConstantSizeExample";
11+
import { ExamplesSectionDefaultSizeExample } from "./sections/ExamplesSectionDefaultSizeExample";
912

1013
export default function Page() {
1114
return (
1215
<>
1316
<Navbar />
1417
<SquircleDemoSection />
1518
<FeaturesSection />
16-
<UsageSection />
17-
<ExamplesSection />
19+
<UsageSection reactUsageContent={<UsageSectionReactContent />} />
20+
<ExamplesSection
21+
constantSizeExample={<ExampleSectionConstantSizeExample />}
22+
defaultSizeExample={<ExamplesSectionDefaultSizeExample />}
23+
/>
1824
{/* <HowItWorksSection /> */}
1925
<LicenseSection />
2026
<LinksSection />

‎apps/web/app/sections/ExamplesSection.tsx‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,35 @@
1-
export const ExamplesSection = () => {
1+
"use client";
2+
3+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
4+
import { LANGUAGE_SELECTOR_ATOM } from "@/lib/atoms";
5+
import { useAtom } from "jotai";
6+
7+
export const ExamplesSection = ({
8+
constantSizeExample,
9+
defaultSizeExample,
10+
}: {
11+
constantSizeExample: JSX.Element;
12+
defaultSizeExample: JSX.Element;
13+
}) => {
14+
const [language] = useAtom(LANGUAGE_SELECTOR_ATOM);
15+
16+
const langLabel = language === "react" ? "React" : "";
17+
218
return (
319
<div className="mx-auto container w-fit mb-36">
420
<h2 className="font-semibold text-2xl mx-auto w-fit mb-4">
5-
More examples 🎒
21+
More {langLabel} examples 🎒
622
</h2>
23+
24+
<Tabs defaultValue="1" className="w-full flex flex-col items-center">
25+
<TabsList>
26+
<TabsTrigger value="1">Constant size</TabsTrigger>
27+
<TabsTrigger value="2">Default size</TabsTrigger>
28+
</TabsList>
29+
30+
<TabsContent value="1">{constantSizeExample}</TabsContent>
31+
<TabsContent value="2">{defaultSizeExample}</TabsContent>
32+
</Tabs>
733
</div>
834
);
935
};

‎apps/web/app/sections/ExamplesSectionConstantSizeExample.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Card, CardContent } from "@/components/ui/card";
2+
import { Code } from "@/components/ui/code";
3+
import { Squircle } from "@squircle-js/react";
4+
5+
import Prism from "prismjs";
6+
import "prismjs/components/prism-jsx";
7+
8+
const usage = `<Squircle
9+
cornerRadius={64}
10+
cornerSmoothing={1}
11+
width={256}
12+
height={256}
13+
>
14+
<div
15+
className="w-full h-full
16+
bg-gradient-to-br from-indigo-500
17+
via-purple-500 to-pink-500"
18+
/>
19+
</Squircle>`;
20+
21+
const highlightedUsage = Prism.highlight(
22+
["...", usage, "..."].join("\n"),
23+
Prism.languages.jsx,
24+
"jsx"
25+
);
26+
27+
export const ExampleSectionConstantSizeExample = () => {
28+
return (
29+
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
30+
<CardContent className="py-6 w-full space-y-4">
31+
<h3 className="font-semibold text-lg">Code:</h3>
32+
<Code dangerousHTML={highlightedUsage} raw={usage} />
33+
<h3 className="font-semibold text-lg">Result:</h3>
34+
35+
<Squircle
36+
cornerRadius={64}
37+
cornerSmoothing={1}
38+
width={256}
39+
height={256}
40+
className="mx-auto"
41+
>
42+
<div
43+
className="w-full h-full
44+
bg-gradient-to-br from-indigo-500
45+
via-purple-500 to-pink-500"
46+
/>
47+
</Squircle>
48+
</CardContent>
49+
</Card>
50+
);
51+
};

‎apps/web/app/sections/ExamplesSectionDefaultSizeExample.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Card, CardContent } from "@/components/ui/card";
2+
import { Code } from "@/components/ui/code";
3+
import { Squircle } from "@squircle-js/react";
4+
5+
import Prism from "prismjs";
6+
import "prismjs/components/prism-jsx";
7+
import { ExamplesSectionDefaultSizeExampleClientComponent } from "./ExamplesSectionDefaultSizeExampleClientComponent";
8+
9+
const usage = `<Squircle
10+
cornerRadius={64}
11+
cornerSmoothing={1}
12+
defaultSize={256}
13+
defaultSize={256}
14+
>
15+
<div
16+
className="w-full h-full
17+
bg-gradient-to-br from-indigo-500
18+
via-purple-500 to-pink-500"
19+
/>
20+
</Squircle>`;
21+
22+
const highlightedUsage = Prism.highlight(
23+
["...", usage, "..."].join("\n"),
24+
Prism.languages.jsx,
25+
"jsx"
26+
);
27+
28+
export const ExamplesSectionDefaultSizeExample = () => {
29+
return (
30+
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
31+
<CardContent className="py-6 w-full space-y-4">
32+
<h3 className="font-semibold text-lg">Code:</h3>
33+
<p>
34+
For images to work you will need to provide either default size, or
35+
specific size you want the image to be.
36+
</p>
37+
<Code dangerousHTML={highlightedUsage} raw={usage} />
38+
<h3 className="font-semibold text-lg">Result:</h3>
39+
40+
<ExamplesSectionDefaultSizeExampleClientComponent />
41+
</CardContent>
42+
</Card>
43+
);
44+
};

‎apps/web/app/sections/ExamplesSectionDefaultSizeExampleClientComponent.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import { Squircle } from "@squircle-js/react";
5+
import { RotateCcwIcon } from "lucide-react";
6+
import { useEffect, useState } from "react";
7+
8+
export const ExamplesSectionDefaultSizeExampleClientComponent = () => {
9+
const [src, setSrc] = useState("");
10+
11+
const handleRefetchImage = () => {
12+
setSrc("");
13+
14+
const timeout = setTimeout(() => {
15+
setSrc("/antoni-silvestrovic-baS2vUSSGBY-unsplash.jpg");
16+
}, 1000);
17+
18+
return () => clearTimeout(timeout);
19+
};
20+
21+
useEffect(() => {
22+
handleRefetchImage();
23+
}, []);
24+
25+
return (
26+
<div className="space-y-4 flex flex-col items-center">
27+
<Button variant="outline" onClick={handleRefetchImage}>
28+
<RotateCcwIcon className={"w-4 h-4 mr-2"} />
29+
Refetch Image
30+
</Button>
31+
{src && (
32+
<Squircle
33+
cornerRadius={64}
34+
cornerSmoothing={1}
35+
// width={256}
36+
// height={256}
37+
defaultWidth={256}
38+
defaultHeight={256}
39+
className="bg-slate-100 w-fit h-fit"
40+
style={{ paddingBottom: !src ? -1 : 0 }}
41+
as="img"
42+
src={src}
43+
>
44+
{/* <a href="https://unsplash.com/@bring_shrubbery"> */}
45+
46+
{/* </a> */}
47+
</Squircle>
48+
)}
49+
</div>
50+
);
51+
};

‎apps/web/app/sections/UsageSection.tsx‎

Lines changed: 18 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,31 @@
1+
"use client";
2+
13
import { Badge } from "@/components/ui/badge";
2-
import { Card, CardContent } from "@/components/ui/card";
3-
import { Code } from "@/components/ui/code";
44
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
55

6-
import Prism from "prismjs";
7-
import "prismjs/components/prism-jsx";
8-
import "prismjs/components/prism-bash";
9-
10-
const usage_react_1 = `pnpm add @squircle-js/react`;
11-
12-
const usage_react_2 = `
13-
import { Squircle }
14-
from "@squircle-js/react"
15-
16-
const YourComponent = () => {
17-
return <Squircle
18-
cornerRadius={10}
19-
cornerSmoothing={1}
20-
className="p-4 bg-black text-white"
21-
>
22-
Squircle!
23-
</Squircle>
24-
}
25-
`.trim();
26-
27-
const usage_react_3 = `
28-
// _app.tsx or root-level layout.tsx
29-
import { SquircleNoScript } from "@squircle-js/react";
6+
import { useAtom } from "jotai";
7+
import { LANGUAGE_SELECTOR_ATOM } from "@/lib/atoms";
308

31-
...
32-
<SquircleNoScript />
33-
...
34-
`.trim();
9+
export const UsageSection = ({
10+
reactUsageContent,
11+
}: {
12+
reactUsageContent: JSX.Element;
13+
}) => {
14+
const [language, setLanguage] = useAtom(LANGUAGE_SELECTOR_ATOM);
3515

36-
const highlightedUsage1 = Prism.highlight(
37-
usage_react_1,
38-
Prism.languages.bash,
39-
"bash"
40-
);
41-
42-
const highlightedUsage2 = Prism.highlight(
43-
usage_react_2,
44-
Prism.languages.jsx,
45-
"jsx"
46-
);
47-
48-
const highlightedUsage3 = Prism.highlight(
49-
usage_react_3,
50-
Prism.languages.jsx,
51-
"jsx"
52-
);
53-
54-
export const UsageSection = () => {
5516
return (
5617
<div className="mx-auto container w-full mb-36">
5718
<h2 className="font-semibold text-2xl mx-auto w-fit mb-4">
5819
How do I use it? 🤔
5920
</h2>
6021

61-
<Tabs defaultValue="react" className="w-full flex flex-col items-center">
22+
<Tabs
23+
defaultValue="react"
24+
value={language}
25+
// TODO: Update this later when other languages are supported.
26+
onValueChange={(newLang) => setLanguage(newLang as "react")}
27+
className="w-full flex flex-col items-center"
28+
>
6229
<TabsList>
6330
<TabsTrigger value="react">React</TabsTrigger>
6431
<TabsTrigger value="vue" disabled>
@@ -73,31 +40,7 @@ export const UsageSection = () => {
7340
</TabsList>
7441

7542
<TabsContent value="react" className="w-fit mx-auto">
76-
<Card className="w-full max-w-[480px] sm:max-w-[508px]">
77-
<CardContent className="py-6 w-full">
78-
<h3 className="font-semibold text-lg mb-2">
79-
Step 1.{" "}
80-
<span className="font-normal">Install the package.</span>
81-
</h3>
82-
<Code dangerousHTML={highlightedUsage1} raw={usage_react_1} />
83-
84-
<h3 className="font-semibold text-lg mb-2 mt-4">
85-
Step 2.{" "}
86-
<span className="font-normal">
87-
Import and use as a a regular div.
88-
</span>
89-
</h3>
90-
<Code raw={usage_react_2} dangerousHTML={highlightedUsage2} />
91-
92-
<h3 className="font-semibold text-lg mb-2 mt-4">
93-
Step 3.{" "}
94-
<span className="font-normal">
95-
Add global component for noscript support.
96-
</span>
97-
</h3>
98-
<Code raw={usage_react_3} dangerousHTML={highlightedUsage3} />
99-
</CardContent>
100-
</Card>
43+
{reactUsageContent}
10144
</TabsContent>
10245
</Tabs>
10346
</div>

0 commit comments

Comments
 (0)