Skip to content

Commit

Permalink
feat: SortChanger more closer to what's proposed on concept (#31)
Browse files Browse the repository at this point in the history
* feat: SortChanger more closer to what's proposed on concept

* feat: add release toggle
  • Loading branch information
Pantotone authored Aug 20, 2023
1 parent 648336c commit 80fb377
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 7 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions src/assets/Icons/Note.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/assets/Icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { ReactComponent as InstallingIcon } from "./Installing.svg";
import { ReactComponent as LinkIcon } from "./Link.svg";
import { ReactComponent as MinimizeIcon } from "./Minimize.svg";
import { ReactComponent as NewsIcon } from "./News.svg";
import { ReactComponent as NoteIcon } from "./Note.svg";
import { ReactComponent as OrganizerIcon } from "./Organizer.svg";
import { ReactComponent as QueueIcon } from "./Queue.svg";
import { ReactComponent as QueueListIcon } from "./QueueList.svg";
Expand Down Expand Up @@ -39,6 +40,7 @@ export {
LinkIcon,
MinimizeIcon,
NewsIcon,
NoteIcon,
OrganizerIcon,
QueueIcon,
QueueListIcon,
Expand Down
4 changes: 4 additions & 0 deletions src/components/Setlist/SongEntry/SongEntry.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.song:last-child {
border-bottom: none;
}

.track_container {
display: flex;
align-items: flex-start;
Expand Down
7 changes: 6 additions & 1 deletion src/routes/Setlist/SortChanger.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ button {
.container {
display: flex;
align-items: center;
justify-content: center;
justify-content: right;
gap: 5px;
}

Expand All @@ -18,6 +18,7 @@ button {

border-radius: 50px;
background: #E9E9E9;
cursor: pointer;

color: black;
font-size: 12px;
Expand All @@ -26,6 +27,10 @@ button {
line-height: normal;
}

.item svg {
height: 15px;
}

.item[data-state="on"] {
background: black;
color: white;
Expand Down
16 changes: 12 additions & 4 deletions src/routes/Setlist/SortChanger.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { SetlistSong } from "@app/hooks/useSetlistRelease";
import styles from "./SortChanger.module.css";
import * as ToggleGroup from "@radix-ui/react-toggle-group";
import { DateIcon, NoteIcon, SongIcon, TimeIcon } from "@app/assets/Icons";

export type SortType = keyof SetlistSong;

Expand All @@ -13,16 +14,23 @@ const SortChanger: React.FC<Props> = ({ onChange }: Props) => {
className={styles.container}
type="single"
defaultValue="title"
onValueChange={(value) => onChange(value as SortType)}>
onValueChange={(value: SortType) => onChange(value)}>

<ToggleGroup.Item className={styles.item} value="title">
Song Name
<NoteIcon />
Track
</ToggleGroup.Item>
<ToggleGroup.Item className={styles.item} value="artist">
Artist Name
<SongIcon />
Artist
</ToggleGroup.Item>
<ToggleGroup.Item className={styles.item} value="length">
Song Length
<TimeIcon />
Length
</ToggleGroup.Item>
<ToggleGroup.Item className={styles.item} value="release">
<DateIcon />
Release
</ToggleGroup.Item>
</ToggleGroup.Root>;
};
Expand Down

0 comments on commit 80fb377

Please sign in to comment.