mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added chip icon to DreamCard and DreamCardCompact for visual representation of chip input type

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-17 01:29:35 +02:00
parent fca8d962f4
commit 86e145515e
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/DreamCard.tsx
View File

@@ -5,6 +5,7 @@ import {NavLink} from "react-router-dom";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import {getTextStyle} from '../styles/StyleUtils'; import {getTextStyle} from '../styles/StyleUtils';
import {formatDateWithTime} from '../utils/DateUtils'; import {formatDateWithTime} from '../utils/DateUtils';
import {FaMicrochip} from 'react-icons/fa6';
interface DreamCardProps { interface DreamCardProps {
dream: Dream; dream: Dream;
@@ -24,11 +25,17 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
}, [animationDelay]); }, [animationDelay]);
return (<NavLink key={dream.id} to={`/dream/${dream.id}`}> 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={{ style={{
background: 'var(--purple-gradient)', background: 'var(--purple-gradient)',
animationDelay: `${animationDelay * 0.2}s` 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="flex rounded items-center mb-4">
<div className="relative"> <div className="relative">
<img <img

7
src/components/DreamCardCompact.tsx
View File

@@ -2,6 +2,7 @@ import {NavLink} from 'react-router-dom';
import {formatDateSimple} from '../utils/DateUtils'; import {formatDateSimple} from '../utils/DateUtils';
import Dream from '../types/Dream'; import Dream from '../types/Dream';
import User from '../types/User'; import User from '../types/User';
import {FaMicrochip} from 'react-icons/fa6';
interface DreamCardCompactProps { interface DreamCardCompactProps {
dream: Dream; 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)', 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)' 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"> <div className="flex flex-col mb-1">
{showUser && user && ( {showUser && user && (
<div className="flex justify-center mb-2"> <div className="flex justify-center mb-2">