@ -1,4 +0,0 @@
@@ -1,4 +0,0 @@
|
||||
.icon > path { |
||||
width: 10px; |
||||
fill: var(--text-color); |
||||
} |
||||
@ -1,62 +0,0 @@
@@ -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 @@
@@ -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'], |
||||
}; |
||||