Skip to content

Commit

Permalink
fix AND filter bug and add filter category
Browse files Browse the repository at this point in the history
  • Loading branch information
@hemarina
hemarina committed Sep 16, 2023
1 parent b466252 commit a9c4c54
Show file tree
Hide file tree
Showing 5 changed files with 195 additions and 115 deletions.
51 changes: 28 additions & 23 deletions website/src/components/gallery/ShowcaseCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,17 @@ import {
FontWeights,
Popup,
Separator,
IPivotStyles
IPivotStyles,
} from "@fluentui/react";
import { title } from "process";

const TagComp = React.forwardRef<HTMLLIElement, Tag>(
({ label, description }) => (
const TagComp = React.forwardRef<HTMLButtonElement, Tag>(
({ label, description }, ref) => (
<Button
appearance="outline"
size="small"
title={description}
ref={ref}
style={{
height: "20px",
alignContent: "center",
Expand All @@ -61,8 +62,8 @@ const TagComp = React.forwardRef<HTMLLIElement, Tag>(
>
{label}
</Button>
)
);
)
);

function ShowcaseCardTag({
tags,
Expand All @@ -85,11 +86,11 @@ function ShowcaseCardTag({
if (length > 8) {
return (
<>
{tagObjectsSorted.slice(0, 8).map((tagObject, index) => {
{tagObjectsSorted.slice(0, 8).map((tagObject) => {
const id = `showcase_card_tag_${tagObject.tag}`;
return (
<div>
<TagComp key={index} id={id} {...tagObject} />
<div key={id}>
<TagComp id={id} {...tagObject} />
</div>
);
})}
Expand All @@ -116,12 +117,11 @@ function ShowcaseCardTag({
} else {
return (
<>
{tagObjectsSorted.map((tagObject, index) => {
{tagObjectsSorted.map((tagObject) => {
const id = `showcase_card_tag_${tagObject.tag}`;

return (
<div>
<TagComp key={index} id={id} {...tagObject} />
<div key={id}>
<TagComp id={id} {...tagObject} />
</div>
);
})}
Expand All @@ -131,12 +131,11 @@ function ShowcaseCardTag({
} else {
return (
<>
{tagObjectsSorted.map((tagObject, index) => {
{tagObjectsSorted.map((tagObject) => {
const id = `showcase_card_tag_${tagObject.tag}`;

return (
<div>
<TagComp key={index} id={id} {...tagObject} />
<div key={id}>
<TagComp id={id} {...tagObject} />
</div>
);
})}
Expand All @@ -155,6 +154,7 @@ function ShowcaseMultipleWebsites(
if (i != length - 1) {
return (
<FluentUILink
key={i}
className={styles.cardAuthor}
href={websiteLink}
target="_blank"
Expand All @@ -165,6 +165,7 @@ function ShowcaseMultipleWebsites(
} else {
return (
<FluentUILink
key={i}
className={styles.cardAuthor}
href={websiteLink}
target="_blank"
Expand Down Expand Up @@ -418,7 +419,7 @@ function ShowcaseCard({ user }: { user: User }) {
>
<div className={styles.cardTextBy}>by</div>
<div style={{ fontSize: "12px" }}>
<ShowcaseMultipleAuthors user={user} />
<ShowcaseMultipleAuthors key={user.title} user={user} />
</div>
</div>
<div
Expand Down Expand Up @@ -458,7 +459,7 @@ function ShowcaseCard({ user }: { user: User }) {
}}
onClick={openPanel}
>
<ShowcaseCardTag tags={user.tags} moreTag={true} />
<ShowcaseCardTag key={user.title} tags={user.tags} moreTag={true} />
</div>
</div>
</div>
Expand Down Expand Up @@ -657,8 +658,8 @@ function ShowcaseCardPanel({ user }: { user: User }) {
}}
>
<div className={styles.cardTextBy}>by</div>
<div style={{ fontSize: "14px",fontWeight:'400' }}>
<ShowcaseMultipleAuthors user={user} />
<div style={{ fontSize: "14px", fontWeight: "400" }}>
<ShowcaseMultipleAuthors key={user.title} user={user} />
</div>
<FluentUILink
href={user.website}
Expand Down Expand Up @@ -699,12 +700,16 @@ function ShowcaseCardPanel({ user }: { user: User }) {
overflow: "hidden",
columnGap: "5px",
flexFlow: "wrap",
padding:'5px 0'
padding: "5px 0",
}}
>
<ShowcaseCardTag tags={user.tags} moreTag={false} />
<ShowcaseCardTag key={user.title} tags={user.tags} moreTag={false} />
</div>
<Pivot aria-label="Template Detials and Legal" styles={pivotStyles} style={{paddingTop:'20px'}}>
<Pivot
aria-label="Template Detials and Legal"
styles={pivotStyles}
style={{ paddingTop: "20px" }}
>
<PivotItem
style={{
color: "#242424",
Expand Down
84 changes: 47 additions & 37 deletions website/src/components/gallery/ShowcaseTagSelect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,9 @@
type TagType,
} from '@site/src/data/tags';

import styles from './styles.module.css';
import { Checkbox } from "@fluentui/react-components";

interface Props extends ComponentProps<'input'> {
icon: ReactElement<ComponentProps<'svg'>>;
label: ReactNode;
tag: TagType;
}
import styles from './styles.module.css';

const TagQueryStringKey = 'tags';

Expand All @@ -41,30 +37,36 @@
return searchParams.toString();
}

function ShowcaseTagSelect(
{id, icon, label, tag, ...rest}: Props,
ref: React.ForwardedRef<HTMLLabelElement>,
) {
const location = useLocation();
const history = useHistory();
const [selected, setSelected] = useState(false);
useEffect(() => {
const tags = readSearchTags(location.search);
setSelected(tags.includes(tag));
}, [tag, location]);
const toggleTag = useCallback(() => {
const tags = readSearchTags(location.search);
const newTags = toggleListItem(tags, tag);
const newSearch = replaceSearchTags(location.search, newTags);
history.push({
...location,
search: newSearch,
state: prepareUserState(),
});
}, [tag, location, history]);
return (
<>
<input
export default function ShowcaseTagSelect(
// id: string,
{
label,
tag,
}: {
label:string;
tag: TagType;
}
): JSX.Element {
const location = useLocation();
const history = useHistory();
const [selected, setSelected] = useState(false);
useEffect(() => {
const tags = readSearchTags(location.search);
setSelected(tags.includes(tag));
}, [tag, location]);
const toggleTag = useCallback(() => {
const tags = readSearchTags(location.search);
const newTags = toggleListItem(tags, tag);
const newSearch = replaceSearchTags(location.search, newTags);
history.push({
...location,
search: newSearch,
state: prepareUserState(),
});
}, [tag, location, history]);
return (
<>
{/* <input
type="checkbox"
id={id}
className="screen-reader-only"
Expand All @@ -89,10 +91,18 @@
/>
<label ref={ref} htmlFor={id} className={styles.checkboxLabel}>
{label}
{icon}
</label>
</>
);
}

export default React.forwardRef(ShowcaseTagSelect);
</label> */}
<Checkbox
// id={id}
onKeyDown={(e) => {
if (e.key === "Enter") {
toggleTag();
}
}}
onChange={toggleTag}
checked={selected}
label={label}
/>
</>
);
}
Loading

0 comments on commit a9c4c54

Please sign in to comment.