From fe3f1ebd8b856a802fa2074926c4e7b1b340eb7a Mon Sep 17 00:00:00 2001
From: Abhinavpatel <121427766+Abhinavpatel00@users.noreply.github.com>
Date: Sun, 18 Feb 2024 20:33:00 +0530
Subject: [PATCH] Update TOCInline.tsx

Enhances functionality by providing users with the option to customize the styling of list (li) elements. I'm currently utilizing this library and felt the need to personalize the appearance of my li elements. Therefore, I'm suggesting this modification to the library to ensure that everyone can take advantage of this improvement.
---
 packages/pliny/src/ui/TOCInline.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/pliny/src/ui/TOCInline.tsx b/packages/pliny/src/ui/TOCInline.tsx
index ff6a0c2..ce80ec7 100644
--- a/packages/pliny/src/ui/TOCInline.tsx
+++ b/packages/pliny/src/ui/TOCInline.tsx
@@ -8,6 +8,7 @@ export interface TOCInlineProps {
   exclude?: string | string[]
   collapse?: boolean
   ulClassName?: string
+  liClassName?: string
 }
 
 export interface NestedTocItem extends TocItem {
@@ -57,6 +58,7 @@ const createNestedList = (items: TocItem[]): NestedTocItem[] => {
  *   exclude = '',
  *   collapse = false,
  *   ulClassName = '',
+ *   liClassName = '',
  * }
  *
  */
@@ -68,6 +70,7 @@ const TOCInline = ({
   exclude = '',
   collapse = false,
   ulClassName = '',
+  liClassName = '',
 }: TOCInlineProps) => {
   const re = Array.isArray(exclude)
     ? new RegExp('^(' + exclude.join('|') + ')$', 'i')
@@ -86,7 +89,7 @@ const TOCInline = ({
     return (
       <ul className={ulClassName}>
         {items.map((item, index) => (
-          <li key={index}>
+          <li key={index} className={liClassName}>
             <a href={item.url}>{item.value}</a>
             {createList(item.children)}
           </li>