From a5433c346e15bcc32996334da412faf4de300aa2 Mon Sep 17 00:00:00 2001 From: Marco Acierno Date: Sun, 9 Feb 2025 14:37:52 +0100 Subject: [PATCH 1/2] Add new illustration --- src/illustrations/illustration.stories.tsx | 4 + src/illustrations/illustrations.ts | 3 + src/illustrations/index.ts | 1 + src/illustrations/snake-tail-up.tsx | 2 +- src/illustrations/snakes-facing-left.tsx | 194 +++++++++++++++++++++ src/illustrations/types.ts | 3 +- 6 files changed, 205 insertions(+), 2 deletions(-) create mode 100644 src/illustrations/snakes-facing-left.tsx diff --git a/src/illustrations/illustration.stories.tsx b/src/illustrations/illustration.stories.tsx index c3ed16b..b19ccdf 100644 --- a/src/illustrations/illustration.stories.tsx +++ b/src/illustrations/illustration.stories.tsx @@ -25,6 +25,7 @@ import { SnakesWithDirections } from "./snakes-with-directions"; import { SnakesWithOutlines } from "./snakes-with-outlines"; import { TripleSnakes } from "./triple-snakes"; import { SnakeWithPopcorn } from "./snake-with-popcorn"; +import { SnakesFacingLeft } from "./snakes-facing-left"; export default { title: "Illustrations", @@ -115,3 +116,6 @@ TripleSnakesStory.args = { component: TripleSnakes }; export const SnakeWithPopcornStory = Template.bind({}); SnakeWithPopcornStory.args = { component: SnakeWithPopcorn }; + +export const SnakesFacingLeftStory = Template.bind({}); +SnakesFacingLeftStory.args = { component: SnakesFacingLeft }; diff --git a/src/illustrations/illustrations.ts b/src/illustrations/illustrations.ts index 5e15ca5..f4d930c 100644 --- a/src/illustrations/illustrations.ts +++ b/src/illustrations/illustrations.ts @@ -25,6 +25,7 @@ import { SnakesWithCocktail } from "./snakes-with-cocktail"; import { SnakesWithDirections } from "./snakes-with-directions"; import { SnakesWithOutlines } from "./snakes-with-outlines"; import { TripleSnakes } from "./triple-snakes"; +import { SnakesFacingLeft } from "./snakes-facing-left"; import { Illustration } from "./types"; export const getIllustration = (name: Illustration | undefined) => { @@ -83,6 +84,8 @@ export const getIllustration = (name: Illustration | undefined) => { return SnakeTailUp; case "snakeWithPopcorn": return SnakeWithPopcorn; + case "snakesFacingLeft": + return SnakesFacingLeft; } return null; }; diff --git a/src/illustrations/index.ts b/src/illustrations/index.ts index fc1eb61..78ef526 100644 --- a/src/illustrations/index.ts +++ b/src/illustrations/index.ts @@ -25,4 +25,5 @@ export { SnakesWithOutlines } from "./snakes-with-outlines"; export { TripleSnakes } from "./triple-snakes"; export { SnakeTailUp } from "./snake-tail-up"; export { SnakeWithPopcorn } from "./snake-with-popcorn"; +export { SnakesFacingLeft } from "./snakes-facing-left"; export { getIllustration } from "./illustrations"; diff --git a/src/illustrations/snake-tail-up.tsx b/src/illustrations/snake-tail-up.tsx index 0bc058d..e9f1617 100644 --- a/src/illustrations/snake-tail-up.tsx +++ b/src/illustrations/snake-tail-up.tsx @@ -34,4 +34,4 @@ export const SnakeTailUp = (props: React.SVGProps) => { ); -} +}; diff --git a/src/illustrations/snakes-facing-left.tsx b/src/illustrations/snakes-facing-left.tsx new file mode 100644 index 0000000..7317b93 --- /dev/null +++ b/src/illustrations/snakes-facing-left.tsx @@ -0,0 +1,194 @@ +import * as React from "react"; + +export const SnakesFacingLeft = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/illustrations/types.ts b/src/illustrations/types.ts index 939ad49..b2c0ecc 100644 --- a/src/illustrations/types.ts +++ b/src/illustrations/types.ts @@ -25,4 +25,5 @@ export type Illustration = | "snakesWithOutlines" | "tripleSnakes" | "snakeTailUp" - | "snakeWithPopcorn"; + | "snakeWithPopcorn" + | "snakesFacingLeft"; From f5da1be72f381e71a29deaa4d986a64064c25dcb Mon Sep 17 00:00:00 2001 From: Marco Acierno Date: Sun, 9 Feb 2025 16:26:36 +0100 Subject: [PATCH 2/2] left/right --- src/slider-grid/slider-grid.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/slider-grid/slider-grid.tsx b/src/slider-grid/slider-grid.tsx index 94be6fd..5d28c81 100644 --- a/src/slider-grid/slider-grid.tsx +++ b/src/slider-grid/slider-grid.tsx @@ -10,7 +10,7 @@ type Props = { cols: number; mdCols?: number; background?: "snake" | "none"; - justifyContent?: "center"; + justifyContent?: "left" | "center" | "right"; wrap?: "wrap" | "nowrap"; }; @@ -73,7 +73,9 @@ export const SliderGrid = ({ className={clsx( `snap-x snap-mandatory overflow-x-auto flex md:-mt-2 lg:-mt-4 md:px-2 lg:px-0`, { + "md:justify-start": justifyContent === "left", "md:justify-center": justifyContent === "center", + "md:justify-end": justifyContent === "right", "md:flex-wrap": wrap === "wrap", "md:flex-nowrap": wrap === "nowrap",