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"; 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",