implement list styles

Author: pettinarip

src/components/Footer.tsx

@@ -316,7 +316,7 @@ const Footer = ({ lastDeployLocaleTimestamp }: FooterProps) => {
             <h3 className="my-5 text-sm font-bold">
               <Translation id={section.title} />
             </h3>
-            <List className="text-sm">
+            <List className="m-0 mb-4 text-sm">
               {section.links.map((link, linkIdx) => (
                 <ListItem key={linkIdx} className="mb-4">
                   <BaseLink

src/components/ui/list.tsx

@@ -1,22 +1,53 @@
 import { BaseHTMLAttributes, ElementRef, forwardRef } from "react"
+import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "@/lib/utils/cn"
 
-const List = forwardRef<ElementRef<"ul">, BaseHTMLAttributes<HTMLUListElement>>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn("m-0", className)} {...props} />
-  )
+export type ListProps = BaseHTMLAttributes<HTMLUListElement> & {
+  asChild?: boolean
+}
+
+const List = forwardRef<ElementRef<"ul">, ListProps>(
+  ({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "ul"
+    return (
+      <Comp
+        ref={ref}
+        className={cn("mb-6 ms-6 list-disc", className)}
+        {...props}
+      />
+    )
+  }
 )
 
 List.displayName = "List"
 
+// Alias
+const UnorderedList = List
+
+const OrderedList = forwardRef<ElementRef<"ol">, ListProps>(
+  ({ className, children, ...props }, ref) => (
+    <List className={cn("list-decimal", className)} asChild>
+      <ol ref={ref} {...props}>
+        {children}
+      </ol>
+    </List>
+  )
+)
+
+OrderedList.displayName = "OrderedList"
+
 const ListItem = forwardRef<
   ElementRef<"li">,
   BaseHTMLAttributes<HTMLLIElement>
 >(({ className, ...props }, ref) => (
-  <li ref={ref} className={className} {...props} />
+  <li
+    ref={ref}
+    className={cn("mb-3 last:mb-0 [&_ol]:mt-3 [&_ul]:mt-3", className)}
+    {...props}
+  />
 ))
 
 ListItem.displayName = "ListItem"
 
-export { List, ListItem }
+export { List, ListItem, OrderedList, UnorderedList }

src/styles/global.css

@@ -185,36 +185,6 @@
     @apply text-sm lg:text-md;
   }
 
-  /* TODO: to be replaced with list component styles */
-  ul,
-  ol {
-    margin: 0px 0px 1.45rem 1.45rem;
-    padding: 0;
-
-    & li {
-      padding-inline-start: 0;
-    }
-  }
-
-  li {
-    margin-bottom: calc(1.45rem / 2);
-
-    & > ol,
-    & > ul {
-      margin-inline-start: 1.45rem;
-      margin-block: calc(1.45rem / 2);
-      margin-top: calc(1.45rem / 2);
-    }
-
-    & * {
-      @apply last:mb-0;
-    }
-
-    & > p {
-      margin-bottom: calc(1.45rem / 2);
-    }
-  }
-
   pre,
   code,
   kbd,