feat: add adaptive orientation to List component (#113)

Author: 0xDazzer

.changeset/curly-baboons-matter.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": patch
+---
+
+add adaptive orientation to List component

src/components/List/List.tsx

@@ -5,16 +5,18 @@ import { type ListItemProps, ListItem } from "./components/ListItem";
 
 export interface ListProps {
   className?: string;
-  orientation: "horizontal" | "vertical";
+  orientation: "adaptive" | "horizontal" | "vertical";
   children: ReactElement<ListItemProps, typeof ListItem> | ReactElement<ListItemProps, typeof ListItem>[];
 }
 
 const STYLES = {
+  adaptive: "px-4 md:flex md:py-3",
   horizontal: "flex py-3",
   vertical: "px-4",
 };
 
 const ROW_ORIENTATION = {
+  adaptive: "adaptive",
   horizontal: "vertical",
   vertical: "horizontal",
 } as const;

src/components/List/components/ListItem.tsx

@@ -4,19 +4,23 @@ import { Text } from "@/components/Text";
 
 export interface ListItemProps {
   className?: string;
-  orientation?: "horizontal" | "vertical";
+  orientation?: "adaptive" | "horizontal" | "vertical";
   title: string | JSX.Element;
   value: string | JSX.Element;
   suffix?: JSX.Element;
 }
 
 const STYLES = {
+  adaptive:
+    "flex-row items-center justify-between border-b border-secondary-strokeLight last-of-type:border-0 py-4  md:flex-1 md:flex-col md:items-start md:justify-start md:gap-1.5 md:px-6 md:py-0 md:border-b-0 md:border-r",
   horizontal: "flex-row items-center justify-between border-b border-secondary-strokeLight last-of-type:border-0 py-4",
-  vertical: "flex-1 flex-col items-start justify-start gap-1.5 px-6 border-r border-secondary-strokeLight",
+  vertical:
+    "flex-1 flex-col items-start justify-start gap-1.5 px-6 border-r border-secondary-strokeLight last-of-type:border-0",
 };
 
 const VALUE_STYLES = {
-  horizontal: "flex item-center gap-1",
+  adaptive: "flex items-center gap-1 md:justify-between md:w-full",
+  horizontal: "flex items-center gap-1",
   vertical: "flex items-center justify-between w-full",
 };