lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

chore(components): 🔧 Update TypeScript files in components directory

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Lilith 2026-02-09 00:07:18 -08:00
parent 40fda63fbb
commit a0c71880fd
15 changed files with 60 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
features/marketplace/frontend-public/src/features/inbox/components/SendGiftModal.tsx
View file

@ -19,7 +19,7 @@ import { useCreateGift } from '@features/provider/hooks/useGiftTemplates';
import { Modal } from '@lilith/ui-feedback';
import { Button } from '@lilith/ui-primitives';
import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
import { X, Gift, Calendar, MessageCircle } from 'lucide-react';
import { XIcon, GiftIcon, CalendarIcon, MessageCircleIcon } from '@lilith/ui-icons';
import type { GiftStyleConfig, CreateGiftRequest } from '@/types';
@ -161,7 +161,7 @@ export const SendGiftModal: FC<SendGiftModalProps> = ({
<Section>
<SectionHeader>
<SectionIcon>
<MessageCircle size={18} />
<MessageCircleIcon size={18} />
</SectionIcon>
<SectionTitle>Message Credits</SectionTitle>
</SectionHeader>
@ -209,7 +209,7 @@ export const SendGiftModal: FC<SendGiftModalProps> = ({
<Section>
<SectionHeader>
<SectionIcon>
<Calendar size={18} />
<CalendarIcon size={18} />
</SectionIcon>
<SectionTitle>Expiration (Optional)</SectionTitle>
</SectionHeader>
@ -223,7 +223,7 @@ export const SendGiftModal: FC<SendGiftModalProps> = ({
/>
{expiresAt && (
<ClearButton type="button" onClick={() => setExpiresAt('')}>
<X size={14} />
<XIcon size={14} />
</ClearButton>
)}
<ExpirationHint>
@ -236,7 +236,7 @@ export const SendGiftModal: FC<SendGiftModalProps> = ({
<Section>
<SectionHeader>
<SectionIcon>
<Gift size={18} />
<GiftIcon size={18} />
</SectionIcon>
<SectionTitle>Gift Message & Style</SectionTitle>
</SectionHeader>

6
features/marketplace/frontend-public/src/features/landing/components/AudienceCTABanner.tsx
View file

@ -10,7 +10,7 @@
import { EditableContent } from '@lilith/ui-dev-content';
import { Link } from '@lilith/ui-router';
import styled, { css, type DefaultTheme } from '@lilith/ui-styled-components';
import { ArrowRight } from 'lucide-react';
import { ArrowRightIcon } from '@lilith/ui-icons';
import { useEditableLocale } from '@/hooks/useEditableLocale';
@ -80,7 +80,7 @@ export const AudienceCTABanner = ({
$theme={theme}
>
{ctaText}
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</CTAButtonExternal>
</EditableContent>
) : (
@ -91,7 +91,7 @@ export const AudienceCTABanner = ({
>
<CTAButtonLink to={ctaUrl} $theme={theme}>
{ctaText}
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</CTAButtonLink>
</EditableContent>
)}

6
features/marketplace/frontend-public/src/features/landing/components/AudienceHero/HeroActions.tsx
View file

@ -7,7 +7,7 @@
*/
import { EditableContent } from '@lilith/ui-dev-content';
import { ArrowRight } from 'lucide-react';
import { ArrowRightIcon } from '@lilith/ui-icons';
import {
@ -58,7 +58,7 @@ export const HeroActions = ({
>
<span>{ctaText}</span>
</EditableContent>
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</PrimaryCTAButton>
) : ctaUrl ? (
<PrimaryCTALink to={ctaUrl} $theme={theme}>
@ -70,7 +70,7 @@ export const HeroActions = ({
>
<span>{ctaText}</span>
</EditableContent>
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</PrimaryCTALink>
) : null}
{ctaSecondaryText && ctaSecondaryUrl && (

4
features/marketplace/frontend-public/src/features/landing/components/AudienceHero/HeroToggle.tsx
View file

@ -5,7 +5,7 @@
* Follows Single Responsibility Principle - handles only toggle UI and interaction.
*/
import { RefreshCw } from 'lucide-react';
import { RefreshCwIcon } from '@lilith/ui-icons';
import { ToggleButton } from './styles/';
@ -19,7 +19,7 @@ interface HeroToggleProps {
export const HeroToggle = ({ theme, toggleTo, onToggle }: HeroToggleProps) => (
<ToggleButton onClick={onToggle} $theme={theme}>
<RefreshCw size={14} />
<RefreshCwIcon size={14} />
{toggleTo === 'worker' ? 'Switch to Provider View' : 'Switch to Client View'}
</ToggleButton>
)

15
features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx
View file

@ -8,18 +8,7 @@
import { EditableContent } from '@lilith/ui-dev-content';
import styled from '@lilith/ui-styled-components';
import {
DollarSign,
Shield,
Users,
Lock,
Heart,
Star,
Grid,
Calendar,
MessageCircle,
type LucideIcon,
} from 'lucide-react';
import { DollarSignIcon, ShieldIcon, UsersIcon, LockIcon, HeartIcon, StarIcon, GridIcon, CalendarIcon, MessageCircleIcon, type IconComponent } from '@lilith/ui-icons';
import { useEditableLocale } from '@/hooks/useEditableLocale';
import { breakpoints } from '@/styles';
@ -38,7 +27,7 @@ interface BenefitsSectionProps {
localeNamespace?: string;
}
const iconMap: Record<string, LucideIcon> = {
const iconMap: Record<string, IconComponent> = {
dollar: DollarSign,
shield: Shield,
users: Users,

4
features/marketplace/frontend-public/src/features/landing/components/FeatureColumns.tsx
View file

@ -8,7 +8,7 @@
import { EditableContent } from '@lilith/ui-dev-content';
import styled from '@lilith/ui-styled-components';
import { Check } from 'lucide-react';
import { CheckIcon } from '@lilith/ui-icons';
import { useEditableLocale } from '@/hooks/useEditableLocale';
import { breakpoints } from '@/styles';
@ -66,7 +66,7 @@ export const FeatureColumns = ({
{feature.items.map((item, itemIndex) => (
<FeatureItem key={itemIndex}>
<CheckIcon>
<Check size={16} />
<CheckIcon size={16} />
</CheckIcon>
<EditableContent
source="locale"

4
features/marketplace/frontend-public/src/features/landing/components/FinalCTABanner.tsx
View file

@ -7,7 +7,7 @@
import { Link } from '@lilith/ui-router';
import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
import { ArrowRight } from 'lucide-react';
import { ArrowRightIcon } from '@lilith/ui-icons';
interface FinalCTABannerProps {
title: string;
@ -31,7 +31,7 @@ export const FinalCTABanner = ({
<Description>{description}</Description>
<CTAButton to={ctaUrl}>
{ctaText}
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</CTAButton>
</Content>
</Banner>

4
features/marketplace/frontend-public/src/features/landing/components/SocialProofSection.tsx
View file

@ -8,7 +8,7 @@
import { EditableContent } from '@lilith/ui-dev-content';
import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
import { Quote } from 'lucide-react';
import { QuoteIcon } from '@lilith/ui-icons';
import { useEditableLocale } from '@/hooks/useEditableLocale';
import { breakpoints } from '@/styles';
@ -101,7 +101,7 @@ export const SocialProofSection = ({
{testimonials.map((testimonial, index) => (
<TestimonialCard key={index} $theme={theme}>
<QuoteIcon $theme={theme}>
<Quote size={24} />
<QuoteIcon size={24} />
</QuoteIcon>
<EditableContent
source="locale"

2
features/marketplace/frontend-public/src/features/landing/components/StatsRow.tsx
View file

@ -6,7 +6,7 @@
*/
import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
import { BadgeCheck, Percent, MessageCircle } from 'lucide-react';
import { BadgeCheckIcon, PercentIcon, MessageCircleIcon } from '@lilith/ui-icons';
export interface StatBadge {
value: string;

4
features/marketplace/frontend-public/src/features/landing/components/VisualHero.tsx
View file

@ -8,7 +8,7 @@
import { HeroBackground } from '@lilith/ui-backgrounds';
import { Link } from '@lilith/ui-router';
import styled from '@lilith/ui-styled-components';
import { ArrowRight } from 'lucide-react';
import { ArrowRightIcon } from '@lilith/ui-icons';
import { StatsRow, type StatBadge } from './StatsRow';
@ -42,7 +42,7 @@ export const VisualHero = ({
<CTAButton to={ctaUrl}>
{ctaText}
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</CTAButton>
</HeroBackground>
)

8
features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceCard.tsx
View file

@ -6,7 +6,7 @@
*/
import { EditableContent } from '@lilith/ui-dev-content';
import { ArrowRight } from 'lucide-react';
import { ArrowRightIcon } from '@lilith/ui-icons';
import { AudienceHighlights } from './AudienceHighlights';
import {
@ -22,11 +22,11 @@ import {
import type { KeyboardEvent } from 'react'
import type { AudienceTheme } from './themes';
import type { LucideIcon } from 'lucide-react';
import type { IconComponent } from '@lilith/ui-icons';
interface AudienceCardProps {
theme: AudienceTheme;
icon: LucideIcon;
icon: IconComponent;
title: string;
subtitle: string;
description: string;
@ -124,7 +124,7 @@ export const AudienceCard = ({
$isPulsing={isPulsing}
>
{ctaText}
<ArrowRight size={20} />
<ArrowRightIcon size={20} />
</CTAButton>
</EditableContent>
</PanelContent>

6
features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceChoiceScreen.tsx
View file

@ -10,7 +10,7 @@
* Mobile: Stacked cards
*/
import { DollarSign, Search } from 'lucide-react';
import { DollarSignIcon, SearchIcon } from '@lilith/ui-icons';
import { useTranslation } from 'react-i18next';
@ -56,7 +56,7 @@ export default function AudienceChoiceScreen({ onChoice }: AudienceChoiceScreenP
<ChoiceContainer>
<AudienceCard
theme={WORKER_THEME}
icon={DollarSign}
icon={DollarSignIcon}
title={t('worker.title')}
subtitle={t('worker.subtitle')}
description={t('worker.description')}
@ -74,7 +74,7 @@ export default function AudienceChoiceScreen({ onChoice }: AudienceChoiceScreenP
<AudienceCard
theme={CLIENT_THEME}
icon={Search}
icon={SearchIcon}
title={t('client.title')}
subtitle={t('client.subtitle')}
description={t('client.description')}

4
features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceHighlights.tsx
View file

@ -7,7 +7,7 @@
import { EditableContent } from '@lilith/ui-dev-content';
import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
import { Check } from 'lucide-react';
import { CheckIcon } from '@lilith/ui-icons';
interface AudienceHighlightsProps {
highlights: string[];
@ -31,7 +31,7 @@ export const AudienceHighlights = ({
type="text"
>
<HighlightItem $color={color}>
<Check size={16} />
<CheckIcon size={16} />
<span>{highlight}</span>
</HighlightItem>
</EditableContent>

50
features/marketplace/frontend-public/src/features/landing/components/iconMap.tsx
View file

@ -4,45 +4,29 @@
import type { ReactNode } from 'react';
import {
Shield,
Lock,
Users,
AlertTriangle,
DollarSign,
Star,
CheckCircle,
Heart,
Eye,
Calendar,
MessageCircle,
Globe,
Sliders,
Layers,
Grid,
} from 'lucide-react';
import { ShieldIcon, LockIcon, UsersIcon, AlertTriangleIcon, DollarSignIcon, StarIcon, CheckCircleIcon, HeartIcon, EyeIcon, CalendarIcon, MessageCircleIcon, GlobeIcon, SlidersIcon, LayersIcon, GridIcon } from '@lilith/ui-icons';
// Icon size constant
const ICON_SIZE = 28;
// Map icon names from i18n to Lucide components
export const iconMap: Record<string, ReactNode> = {
shield: <Shield size={ICON_SIZE} />,
lock: <Lock size={ICON_SIZE} />,
users: <Users size={ICON_SIZE} />,
emergency: <AlertTriangle size={ICON_SIZE} />,
dollar: <DollarSign size={ICON_SIZE} />,
star: <Star size={ICON_SIZE} />,
check: <CheckCircle size={ICON_SIZE} />,
heart: <Heart size={ICON_SIZE} />,
eye: <Eye size={ICON_SIZE} />,
calendar: <Calendar size={ICON_SIZE} />,
message: <MessageCircle size={ICON_SIZE} />,
'message-circle': <MessageCircle size={ICON_SIZE} />, // Alias for message
globe: <Globe size={ICON_SIZE} />,
sliders: <Sliders size={ICON_SIZE} />,
layers: <Layers size={ICON_SIZE} />,
grid: <Grid size={ICON_SIZE} />,
shield: <ShieldIcon size={ICON_SIZE} />,
lock: <LockIcon size={ICON_SIZE} />,
users: <UsersIcon size={ICON_SIZE} />,
emergency: <AlertTriangleIcon size={ICON_SIZE} />,
dollar: <DollarSignIcon size={ICON_SIZE} />,
star: <StarIcon size={ICON_SIZE} />,
check: <CheckCircleIcon size={ICON_SIZE} />,
heart: <HeartIcon size={ICON_SIZE} />,
eye: <EyeIcon size={ICON_SIZE} />,
calendar: <CalendarIcon size={ICON_SIZE} />,
message: <MessageCircleIcon size={ICON_SIZE} />,
'message-circle': <MessageCircleIcon size={ICON_SIZE} />, // Alias for message
globe: <GlobeIcon size={ICON_SIZE} />,
sliders: <SlidersIcon size={ICON_SIZE} />,
layers: <LayersIcon size={ICON_SIZE} />,
grid: <GridIcon size={ICON_SIZE} />,
};
export default iconMap;

20
features/marketplace/frontend-public/src/features/provider/pages/GiftsManagementPage.tsx
View file

@ -19,7 +19,7 @@ import { useCallback, useMemo, useState } from 'react';
import { useAuth } from '@lilith/auth-provider';
import { useNavigate, useSearchParams } from '@lilith/ui-router';
import { Gift, Clock, Palette, Plus, Search, X } from 'lucide-react';
import { GiftIcon, ClockIcon, PaletteIcon, PlusIcon, SearchIcon, XIcon } from '@lilith/ui-icons';
import { GiftCard, TemplateCard, NewGiftModal, RevokeGiftModal } from './components';
import * as S from './GiftsManagementPage.styles';
@ -46,9 +46,9 @@ interface Tab {
}
const TABS: Tab[] = [
{ id: 'active', label: 'Active Gifts', icon: <Gift size={18} /> },
{ id: 'history', label: 'Gift History', icon: <Clock size={18} /> },
{ id: 'templates', label: 'My Templates', icon: <Palette size={18} /> },
{ id: 'active', label: 'Active Gifts', icon: <GiftIcon size={18} /> },
{ id: 'history', label: 'Gift History', icon: <ClockIcon size={18} /> },
{ id: 'templates', label: 'My Templates', icon: <PaletteIcon size={18} /> },
];
export const GiftsManagementPage: FC = () => {
@ -217,7 +217,7 @@ export const GiftsManagementPage: FC = () => {
<S.PageSubtitle>Create and manage message gifts for your clients</S.PageSubtitle>
</S.HeaderContent>
<S.CreateButton onClick={handleOpenNewGift}>
<Plus size={18} />
<PlusIcon size={18} />
New Gift
</S.CreateButton>
</S.PageHeader>
@ -240,7 +240,7 @@ export const GiftsManagementPage: FC = () => {
{/* Search */}
<S.SearchWrapper>
<S.SearchIcon>
<Search size={18} />
<SearchIcon size={18} />
</S.SearchIcon>
<S.SearchInput
type="text"
@ -252,7 +252,7 @@ export const GiftsManagementPage: FC = () => {
/>
{searchQuery && (
<S.ClearSearchButton onClick={() => setSearchQuery('')}>
<X size={16} />
<XIcon size={16} />
</S.ClearSearchButton>
)}
</S.SearchWrapper>
@ -280,7 +280,7 @@ export const GiftsManagementPage: FC = () => {
{filteredGifts && filteredGifts.length === 0 ? (
<S.EmptyState>
<S.EmptyIcon>
<Gift size={48} strokeWidth={1} />
<GiftIcon size={48} />
</S.EmptyIcon>
<S.EmptyTitle>
{currentTab === 'active' ? 'No active gifts' : 'No gift history'}
@ -292,7 +292,7 @@ export const GiftsManagementPage: FC = () => {
</S.EmptyText>
{currentTab === 'active' && (
<S.CreateFirstButton onClick={handleOpenNewGift}>
<Plus size={18} />
<PlusIcon size={18} />
Send Your First Gift
</S.CreateFirstButton>
)}
@ -333,7 +333,7 @@ export const GiftsManagementPage: FC = () => {
{filteredTemplates && filteredTemplates.length === 0 ? (
<S.EmptyState>
<S.EmptyIcon>
<Palette size={48} strokeWidth={1} />
<PaletteIcon size={48} />
</S.EmptyIcon>
<S.EmptyTitle>No custom templates</S.EmptyTitle>
<S.EmptyText>Create a template to reuse your gift designs.</S.EmptyText>