buildIn: extensible component

TobiTRy · Dec 13, 2023 · 223c1bf · 223c1bf
1 parent 40fb87d
commit 223c1bf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/molecules/Chip/Chip.tsx b/src/components/molecules/Chip/Chip.tsx
@@ -11,7 +11,7 @@ import { IFancyPillProps } from '@/components/atoms/FancyPill/FancyPill.model';
 // --------------------------------------------------------------------------- //
 export type TChipProps = IChipProps & IFancyPillProps;
 export default function Chip(props: TChipProps) {
-  const { size, outlined, themeType, layer, isActive, externalStyle, ...htmlProps } = props;
+  const { size, outlined, themeType, layer, isActive, externalStyle, children, ...htmlProps } = props;
 
   return (
     <>
@@ -47,8 +47,9 @@ export default function Chip(props: TChipProps) {
         role={props.onClick ? 'button' : undefined}
         tabIndex={0}
         {...htmlProps}
-      ></FancyPill>
-      <FancyBox onClick={props.onClick}></FancyBox>
+      >
+        {children}
+      </FancyPill>
     </>
   );
 }
diff --git a/src/components/organisms/FancyChipList/FancyChipList.tsx b/src/components/organisms/FancyChipList/FancyChipList.tsx
@@ -13,7 +13,7 @@ import { ChipListProps } from './FancyChipListProps.model';
 // The FancyChipList component definition
 export default function FancyChipList(props: ChipListProps) {
   // Destructure props and provide default values from defaultProps
-  const { themeType, layer, chips, inputPlaceholder, label, size, systemInformation } = {
+  const { themeType, layer, chips, inputPlaceholder, outlined, label, size, systemInformation } = {
     ...defaultProps,
     ...props,
   };
@@ -58,17 +58,24 @@ export default function FancyChipList(props: ChipListProps) {
         {chipsWithKeys.map((chip, index) => (
           <FancyChip
             key={index}
-            size={size}
-            label={chip.label}
             contentEditable={editabledChip === chip.id}
             tabIndex={0}
             layer={Math.min((layer ?? 1) + 2, 10) as TLayer}
             onDelete={deleteChip(chip.id)}
-            //outlined={outlined}
+            outlined={outlined}
             onFocus={handleChipFocus(chip.id)}
             onClick={handleClick}
             onKeyDown={(e) => handleChipEdit(chip.id, e)}
-          ></FancyChip>
+          >
+            <FancyChip.Img src='https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg'/>
+
+            <FancyChip.Content>
+              <FancyChip.Content.Title bold={false} fontVariant="content">
+                {chip.label}
+              </FancyChip.Content.Title>
+            </FancyChip.Content>
+            <FancyChip.DeleteButton onClick={deleteChip(chip.id)} />
+          </FancyChip>
         ))}
         <InputLi>
           <input