poc: add Panel footer

Author: FabienMotte

examples/react/css/src/App.tsx

@@ -42,7 +42,7 @@ export function App() {
       <Configure hitsPerPage={8} snippetEllipsisText="…" />
       <div className="container two-columns">
         <div className="left-column">
-          <Panel header="categories">
+          <Panel header="categories" footer="This is a footer">
             <HierarchicalMenu
               attributes={[
                 'hierarchicalCategories.lvl0',

examples/react/css/src/Panel.tsx

@@ -2,15 +2,17 @@ import React from 'react';
 
 type PanelProps = React.PropsWithChildren<{
   header: string;
+  footer?: React.ReactNode;
 }>;
 
-export function Panel({ header, children }: PanelProps) {
+export function Panel({ header, children, footer }: PanelProps) {
   return (
     <div className="ais-Panel">
       <div className="ais-Panel-header">
         <span>{header}</span>
       </div>
       <div className="ais-Panel-body">{children}</div>
+      <div className="ais-Panel-footer">{footer}</div>
     </div>
   );
 }

examples/react/css/src/panel.css

@@ -8,3 +8,8 @@
   font-weight: var(--ais-font-weight-medium);
   text-transform: capitalize;
 }
+
+.ais-Panel-footer {
+  margin-top: calc(var(--ais-spacing) * 0.5);
+  font-size: 0.9em;
+}