Skip to content

Commit

Permalink
feat: integrate samples preview
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexGarrixen committed Dec 26, 2023
1 parent d170c1a commit e13981f
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 36 deletions.
18 changes: 17 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
"jotai": "^2.6.0",
"next": "14.0.3",
"react": "^18",
"react-dom": "^18"
"react-dom": "^18",
"react-responsive-masonry": "^2.1.7"
},
"devDependencies": {
"@commitlint/cli": "^18.4.3",
Expand All @@ -49,6 +50,7 @@
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react-responsive-masonry": "^2.1.3",
"@vercel/style-guide": "^5.1.0",
"eslint": "^8",
"eslint-config-next": "14.0.3",
Expand Down
26 changes: 0 additions & 26 deletions src/components/samples-preview/sample-10.tsx

This file was deleted.

6 changes: 0 additions & 6 deletions src/components/samples-preview/sample-preview.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { Sample6 } from "./sample-6";
import { Sample7 } from "./sample-7";
import { Sample8 } from "./sample-8";
import { Sample9 } from "./sample-9";
import { Sample10 } from "./sample-10";
import { Sample11 } from "./sample-11";
import { Sample12 } from "./sample-12";
import { Sample13 } from "./sample-13";
Expand Down Expand Up @@ -82,11 +81,6 @@ export const Sample_9: Story = {
render: () => <Sample9 />,
};

export const Sample_10: Story = {
name: "Sample 10",
render: () => <Sample10 />,
};

export const Sample_11: Story = {
name: "Sample 11",
render: () => <Sample11 />,
Expand Down
52 changes: 52 additions & 0 deletions src/components/samples-preview/samples-grid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
"use client";

import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
import { useAtomValue } from "jotai";
import Color from "color";
import { css } from "@root/styled-system/css";

import { background, foreground } from "@/store";

import { fgVar, bgVar } from "./utils";
import { Sample1 } from "./sample-1";
import { Sample2 } from "./sample-2";
import { Sample3 } from "./sample-3";
import { Sample4 } from "./sample-4";
import { Sample5 } from "./sample-5";
import { Sample6 } from "./sample-6";
import { Sample7 } from "./sample-7";
import { Sample8 } from "./sample-8";
import { Sample9 } from "./sample-9";
import { Sample11 } from "./sample-11";
import { Sample12 } from "./sample-12";
import { Sample13 } from "./sample-13";

export function SamplesGrid() {
const bg = useAtomValue(background);
const fg = useAtomValue(foreground);
const bgRgb = Color(bg).rgb().round().array();
const fgRgb = Color(fg).rgb().round().array();

return (
<ResponsiveMasonry
className={css({ "& article": { border: "1px solid", borderColor: "border-secondary" } })}
columnsCountBreakPoints={{ 0: 1, 640: 2, 1024: 3 }}
style={{ [fgVar as string]: fgRgb.join(" "), [bgVar as string]: bgRgb.join(" ") }}
>
<Masonry gutter="20px">
<Sample1 />
<Sample2 />
<Sample3 />
<Sample4 />
<Sample5 />
<Sample6 />
<Sample7 />
<Sample8 />
<Sample9 />
<Sample11 />
<Sample12 />
<Sample13 />
</Masonry>
</ResponsiveMasonry>
);
}
8 changes: 6 additions & 2 deletions src/components/samples-preview/samples-preview.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { css } from "@root/styled-system/css";

import { SamplesGrid } from "./samples-grid";

const classes = {
root: css({ mt: "5" }),
root: css({ my: "5" }),
heading: css({ color: "text-secondary", fontWeight: "500", mb: "2" }),
container: css({ bgColor: "bg-primary", p: "5", rounded: "xl", shadow: "xs" }),
};
Expand All @@ -10,7 +12,9 @@ export function SamplesPreview() {
return (
<section className={classes.root}>
<p className={classes.heading}>SAMPLES PREVIEW</p>
<div className={classes.container}>samples here!</div>
<div className={classes.container}>
<SamplesGrid />
</div>
</section>
);
}

0 comments on commit e13981f

Please sign in to comment.