{['all', 'filled'].includes(props.iconStyle) && (
@@ -28,12 +31,16 @@ export function IconTile(props: IconTileProps) {
>
+ {props.icon.formats.includes('24px') &&
+ props.iconFormat !== '24px' && (
+ 24px
+ )}
)}
@@ -46,12 +53,16 @@ export function IconTile(props: IconTileProps) {
>
+ {props.icon.formats.includes('24px') &&
+ props.iconFormat !== '24px' && (
+ 24px
+ )}
)}
diff --git a/src/components/IconTileModal.module.scss b/src/components/IconTileModal.module.scss
index 25b57b1986..a7bf2ed8b8 100644
--- a/src/components/IconTileModal.module.scss
+++ b/src/components/IconTileModal.module.scss
@@ -64,6 +64,7 @@
transition: background-color ease-in-out 0.15s;
white-space: nowrap;
display: inline-block;
+ font-size: 0.8rem;
&:hover {
background-color: var(--link-color-dark);
@@ -102,6 +103,14 @@
font-size: 0.8rem;
}
+.modal24pxImage {
+ margin: 16px 0;
+}
+
+.modalTagsSection {
+ margin-top: 2rem;
+}
+
@media (min-width: 60rem) {
.modalWrapper {
max-height: none;
@@ -125,4 +134,11 @@
margin: 0;
width: 96px;
}
+
+ .modal24pxImage {
+ position: absolute;
+ left: 90px;
+ width: 24px;
+ height: auto;
+ }
}
diff --git a/src/components/IconTileModal.tsx b/src/components/IconTileModal.tsx
index c7c008c33d..9680b8de8e 100644
--- a/src/components/IconTileModal.tsx
+++ b/src/components/IconTileModal.tsx
@@ -28,9 +28,9 @@ export function IconTileModal(props: IconTileModalProps) {
height="96"
alt=""
/>
-
Icon
{props.icon.title}
+
Standard version (48px grid)
- {props.icon.tags.length > 0 && (
+ {props.icon.formats.includes('24px') && (
<>
+
+
Small version (24px grid)
+
+
+ )}
+
+ {props.icon.tags.length > 0 && (
+
Tags
{props.icon.tags.map((tag) => (
{tag}
))}
-
+
)}
Filename
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 186f06a4c6..0fc489b7cd 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -3,11 +3,10 @@ import { useRouter } from 'next/router';
import { useSelector, useDispatch } from 'react-redux';
import classnames from 'classnames';
import { RootState } from '../store';
-import { setStyle, setKeywords } from '../store/search';
+import { setStyle, setKeywords, setFormat } from '../store/search';
import { searchKeywords } from '../lib/searchKeywords';
import { TopBar } from './TopBar';
import { CategoryHeading } from './CategoryHeading';
-import { CategoryDropdown } from './CategoryDropdown';
import IconGrid from './IconGrid';
import { IconTileModal } from './IconTileModal';
import styles from '../pages/index.module.scss';
@@ -37,10 +36,10 @@ export default function LandingPage({
const searchStyleValue = useSelector(
(state: RootState) => state.search.style
);
- const searchCategoryValue = useSelector(
- (state: RootState) => state.search.category
+ const searchFormatValue = useSelector(
+ (state: RootState) => state.search.format
);
- const isFiltered = searchKeywordsValue || searchCategoryValue;
+
const [modalIcon, setModalIcon] = useState
(undefined);
const router = useRouter();
@@ -72,29 +71,32 @@ export default function LandingPage({
}
}, [categories, router.asPath]);
- const iconsToRender = useMemo(() => {
- if (isFiltered) {
+ const categoriesToRender = useMemo(() => {
+ const filteredCategories: Category[] = [];
+
+ categories.forEach((c) => {
const filteredIcons: Icon[] = [];
- const filteredCategories = searchCategoryValue
- ? categories.filter((c) => c.title === searchCategoryValue)
- : categories;
-
- filteredCategories.forEach((c) => {
- c.icons.forEach((i) => {
- if (
- searchKeywords(
- searchKeywordsValue,
- i.tags.concat([i.title, c.title]).join(', ')
- )
- ) {
- filteredIcons.push(i);
- }
- });
+ c.icons.forEach((i) => {
+ if (
+ searchKeywords(
+ searchKeywordsValue,
+ i.tags.concat([i.title, c.title]).join(', ')
+ ) &&
+ i.formats.includes(searchFormatValue)
+ ) {
+ filteredIcons.push(i);
+ }
});
- return filteredIcons;
- }
- return [];
- }, [searchKeywordsValue, searchCategoryValue, isFiltered, categories]);
+
+ if (filteredIcons.length > 0) {
+ const filteredCategory: Category = structuredClone(c);
+ filteredCategory.icons = filteredIcons;
+ filteredCategories.push(filteredCategory);
+ }
+ });
+
+ return filteredCategories;
+ }, [searchFormatValue, categories, searchKeywordsValue]);
const totalIconCount = categories.reduce((counter, c) => {
return counter + c.icons.length;
@@ -124,9 +126,6 @@ export default function LandingPage({
onChange={(e) => dispatch(setKeywords(e.target.value))}
/>
-
-
-
+
+
+
+