@ -1,4 +0,0 @@ |
|||||||
.icon > path { |
|
||||||
width: 10px; |
|
||||||
fill: var(--text-color); |
|
||||||
} |
|
||||||
@ -1,62 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import s from './CategoryIcon.module.scss'; |
|
||||||
|
|
||||||
import GAME from './icons/games.svg'; |
|
||||||
import CHAT from './icons/chat.svg'; |
|
||||||
import CONFERENCE from './icons/conference.svg'; |
|
||||||
import GOVERNMENT from './icons/gov.svg'; |
|
||||||
import RELIGION from './icons/religion.svg'; |
|
||||||
import TECH from './icons/tech.svg'; |
|
||||||
import MUSIC from './icons/music.svg'; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
tags: string[]; |
|
||||||
} |
|
||||||
|
|
||||||
const ICON_MAPPING = { |
|
||||||
game: GAME, |
|
||||||
gamer: GAME, |
|
||||||
games: GAME, |
|
||||||
playing: GAME, |
|
||||||
|
|
||||||
chat: CHAT, |
|
||||||
chatting: CHAT, |
|
||||||
|
|
||||||
conference: CONFERENCE, |
|
||||||
event: CONFERENCE, |
|
||||||
convention: CONFERENCE, |
|
||||||
|
|
||||||
government: GOVERNMENT, |
|
||||||
|
|
||||||
religion: RELIGION, |
|
||||||
god: RELIGION, |
|
||||||
church: RELIGION, |
|
||||||
bible: RELIGION, |
|
||||||
|
|
||||||
tech: TECH, |
|
||||||
technology: TECH, |
|
||||||
code: TECH, |
|
||||||
software: TECH, |
|
||||||
linux: TECH, |
|
||||||
development: TECH, |
|
||||||
|
|
||||||
music: MUSIC, |
|
||||||
listening: MUSIC, |
|
||||||
}; |
|
||||||
|
|
||||||
function getCategoryIconFromTags(tags: string[]): any { |
|
||||||
const categories = tags.map(tag => ICON_MAPPING[tag]).filter(Boolean); |
|
||||||
if (categories.length > 0) { |
|
||||||
return categories[0]; |
|
||||||
} |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
export default function CategoryIcon({ tags }: Props) { |
|
||||||
const Icon = getCategoryIconFromTags(tags); |
|
||||||
if (!Icon) { |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
return <Icon className={s.icon} />; |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 782 B |
|
Before Width: | Height: | Size: 793 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.9 KiB |
@ -1,26 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { ComponentStory, ComponentMeta } from '@storybook/react'; |
|
||||||
import CategoryIcon from '../components/ui/CategoryIcon/CategoryIcon'; |
|
||||||
|
|
||||||
export default { |
|
||||||
title: 'owncast/Components/Category icon', |
|
||||||
component: CategoryIcon, |
|
||||||
parameters: {}, |
|
||||||
} as ComponentMeta<typeof CategoryIcon>; |
|
||||||
|
|
||||||
const Template: ComponentStory<typeof CategoryIcon> = args => <CategoryIcon {...args} />; |
|
||||||
|
|
||||||
export const Game = Template.bind({}); |
|
||||||
Game.args = { |
|
||||||
tags: ['games', 'fun'], |
|
||||||
}; |
|
||||||
|
|
||||||
export const Chat = Template.bind({}); |
|
||||||
Chat.args = { |
|
||||||
tags: ['blah', 'chat', 'games', 'fun'], |
|
||||||
}; |
|
||||||
|
|
||||||
export const Conference = Template.bind({}); |
|
||||||
Conference.args = { |
|
||||||
tags: ['blah', 'conference', 'games', 'fun'], |
|
||||||
}; |
|
||||||