From 86e145515ee3b3b0a63be9d1802d1d9b7463f524 Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Thu, 17 Jul 2025 01:29:35 +0200
Subject: [PATCH] added `chip` icon to `DreamCard` and `DreamCardCompact` for
 visual representation of `chip` input type

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/components/DreamCard.tsx        | 9 ++++++++-
 src/components/DreamCardCompact.tsx | 7 +++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/DreamCard.tsx b/src/components/DreamCard.tsx
index 18a5ebc..b061723 100644
--- a/src/components/DreamCard.tsx
+++ b/src/components/DreamCard.tsx
@@ -5,6 +5,7 @@ import {NavLink} from "react-router-dom";
 import {useEffect, useState} from "react";
 import {getTextStyle} from '../styles/StyleUtils';
 import {formatDateWithTime} from '../utils/DateUtils';
+import {FaMicrochip} from 'react-icons/fa6';
 
 interface DreamCardProps {
     dream: Dream;
@@ -24,11 +25,17 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
     }, [animationDelay]);
 
     return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
-        <li className={`dreamy-card backdrop-blur-md mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}
+        <li className={`dreamy-card backdrop-blur-md mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'} relative`}
             style={{
                 background: 'var(--purple-gradient)',
                 animationDelay: `${animationDelay * 0.2}s`
             }}>
+            {dream.input.inputType === 'chip' && (
+                <div className="absolute top-6 right-10 w-10 h-10 flex items-center justify-center rounded-full"
+                     style={{background: 'var(--accent-gradient)', boxShadow: '0 0 5px var(--shadow)'}}>
+                    <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-pink-300 opacity-90 hover:opacity-100"/>
+                </div>
+            )}
             <div className="flex rounded items-center mb-4">
                 <div className="relative">
                     <img
diff --git a/src/components/DreamCardCompact.tsx b/src/components/DreamCardCompact.tsx
index 16f16bb..18f5abf 100644
--- a/src/components/DreamCardCompact.tsx
+++ b/src/components/DreamCardCompact.tsx
@@ -2,6 +2,7 @@ import {NavLink} from 'react-router-dom';
 import {formatDateSimple} from '../utils/DateUtils';
 import Dream from '../types/Dream';
 import User from '../types/User';
+import {FaMicrochip} from 'react-icons/fa6';
 
 interface DreamCardCompactProps {
     dream: Dream;
@@ -22,6 +23,12 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
                     boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
                     border: '1px solid rgba(166, 77, 255, 0.1)'
                 }}>
+                {dream.input.inputType === 'chip' && (
+                    <div className="absolute top-6 right-10 w-10 h-10 flex items-center justify-center rounded-full"
+                         style={{background: 'var(--accent-gradient)', boxShadow: '0 0 5px var(--shadow)'}}>
+                        <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-pink-300 opacity-90 hover:opacity-100"/>
+                    </div>
+                )}
                 <div className="flex flex-col mb-1">
                     {showUser && user && (
                         <div className="flex justify-center mb-2">