Skip to content

Commit

Permalink
cleanup pass
Browse files Browse the repository at this point in the history
  • Loading branch information
@sphinxrave
sphinxrave committed Oct 26, 2024
1 parent 3717d37 commit 0eea657
Show file tree
Hide file tree
Showing 10 changed files with 137 additions and 175 deletions.
4 changes: 2 additions & 2 deletions packages/react/grep-icons.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ def extract_icons(directory):
extracted_icons = extract_icons(src_directory)

# Print the extracted icons and their associated files
for icon, files in sorted(extracted_icons.items()):
for icon, files in sorted(extracted_icons.items(), key=lambda entry: entry[0].split(":")[1]):
print(f"Icon: {icon}")
for file in sorted(files):
print(f" - {file}")
print()

# Write the icons and their files to a text file
with open('extracted_icons_with_files.txt', 'w') as f:
for icon, files in sorted(extracted_icons.items()):
for icon, files in sorted(extracted_icons.items(), key=lambda entry: entry[0].split(":")[1]):
f.write(f"Icon: {icon}\n")
for file in sorted(files):
f.write(f" - {file}\n")
Expand Down
73 changes: 21 additions & 52 deletions packages/react/src/components/about/ContactList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,38 @@
import { AboutFaqEmailForm } from "@/components/about/EmailForm";
import { AboutHeading } from "@/components/about/Heading";
import { Button } from "@/shadcn/ui/button";
import { StyledExternalLink } from "@/routes/about/general";
import { useTranslation } from "react-i18next";

export function ContactList() {
const { t } = useTranslation();

const contactLinks = [
{
className:
"border-blue-11 hover:bg-blue-4 hover:border-blue-11 text-blue-11 max-w-xs",
href: "https://twitter.com/messages/compose?recipient_id=1320894663084048384&text=Hello",
icon: "i-logos:twitter",
label: t("about.contact.twitter"),
},
{
className:
"border-violet-10 hover:bg-violet-4 hover:border-violet-10 text-violet-10 max-w-xs",
href: "https://discord.gg/A24AbzgvRJ",
icon: "i-logos:discord-icon",
label: t("about.contact.discord"),
},
];
return (
<div>
<AboutHeading>Get in touch</AboutHeading>
<p className="my-2 max-w-[700px] text-gray-500 dark:text-gray-400">
Have a question or want to work together? We'd love to hear from you.
</p>
<div className="grid w-full max-w-md grid-cols-1 gap-4 sm:grid-cols-2">
<Button asChild variant="link" className="w-full justify-start">
<a
href="https://twitter.com/messages/compose?recipient_id=1320894663084048384&text=Hello"
target="_blank"
rel="noopener noreferrer"
>
<div className="i-logos:twitter" />
{t("about.contact.twitter")}
</a>
</Button>
<Button asChild variant="link" className="w-full justify-start">
<a
href="https://twitter.com/messages/compose?recipient_id=1320894663084048384&text=Hello"
target="_blank"
rel="noopener noreferrer"
>
<div className="i-logos:discord-icon" />
{t("about.contact.discord")}
</a>
</Button>
<div className="flex flex-wrap gap-2">
{contactLinks.map((link, index) => (
<StyledExternalLink key={index} {...link} />
))}
</div>
<div className="h-4"></div>
{/* <AboutHeading>{t("about.contact.discord")}</AboutHeading>
<Link to="https://discord.gg/A24AbzgvRJ" target="_blank">
<img
src="https://discordapp.com/api/guilds/796190073271353385/widget.png?style=banner2"
width="280"
className="rounded"
/>
</Link>
<AboutHeading>{t("about.contact.twitter")}</AboutHeading>
<div className="flex gap-2">
<Link
to="https://twitter.com/intent/follow?original_referer=https://holodex.net%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Efollow%7Ctwgr%5Eholodex&screen_name=holodex"
target="_blank"
>
<img
alt="Twitter Follow"
src="https://img.shields.io/twitter/follow/holodex?color=%231d9bf0&logoColor=%231d9bf0"
/>
</Link>
<Link
to="https://twitter.com/messages/compose?recipient_id=1320894663084048384&text=Hello"
target="_blank"
>
<img
alt="Twitter Message"
src="https://img.shields.io/twitter/url?label=Message%20%40Holodex&style=social&url=https%3A%2F%2Fholodex.net"
/>
</Link>
</div> */}
<AboutHeading>{t("about.contact.email")}</AboutHeading>
<AboutFaqEmailForm />
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/channel/ChannelMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function ChannelMenu({
});
}}
>
<div className="i-heroicons:link" />
<div className="i-heroicons:link-20-solid" />
{t("component.videoCard.copyLink")}
</DropdownMenuItem>
<DropdownMenuItem
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/edit/VideoEditTopic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function VideoEditTopic({ video }: { video: Video }) {
variant="outline"
className={clsx({ "ml-2": true, "opacity-60": !video.topic_id })}
>
<div className="i-ion:pound mr-2 text-xs"></div>
<div className="i-lucide:tag mr-2 text-xs"></div>
{video.topic_id || "?"}
</Badge>
</TypographyLarge>
Expand Down
5 changes: 0 additions & 5 deletions packages/react/src/components/layout/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,6 @@ export const Footer = () => {
openSidebar();
},
},
// {
// icon: "i-heroicons:user-group",
// label: t("component.mainNav.channels"),
// href: `/org/${org}/channels`,
// },
{
icon: "i-heroicons:heart",
label: t("component.mainNav.favorites"),
Expand Down
148 changes: 61 additions & 87 deletions packages/react/src/components/settings/SettingsTimezonePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,36 @@
import React, { useState, useMemo } from "react";
import { Button } from "@/shadcn/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/shadcn/ui/command";
import React from "react";
import { localeAtom, preferredTimezonesAtom } from "@/store/i18n";
import { useAtom, useAtomValue } from "jotai";
import { Badge } from "@/shadcn/ui/badge";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
} from "@/shadcn/ui/select";
import { allTimezones } from "./timezones";

const TimezoneSelector = () => {
export default function TimezoneSelector() {
const { dayjs } = useAtomValue(localeAtom);
const [open, setOpen] = useState(false);
const [selectedTimezones, setSelectedTimezones] = useAtom(
preferredTimezonesAtom,
);

const timezoneOptions = useMemo(() => {
return Object.keys(allTimezones).map((tz) => {
const now = dayjs().tz(tz);
const offset = now.format("Z");
return {
value: tz,
label: `${tz}`,
offset: offset,
};
});
}, [dayjs]);
const timezoneOptions = Object.keys(allTimezones).map((tz) => {
const now = dayjs().tz(tz);
const offset = now.format("Z");
return {
value: tz,
label: tz,
offset: offset,
};
});

const handleTimezoneSelect = (timezone: string) => {
const handleTimezoneAdd = (timezone: string) => {
if (!selectedTimezones.includes(timezone)) {
setSelectedTimezones([...selectedTimezones, timezone]);
}
setOpen(false);
};

const handleTimezoneRemove = (timezone: string) => {
Expand All @@ -46,70 +39,51 @@ const TimezoneSelector = () => {

return (
<div className="space-y-4">
{selectedTimezones.length > 0 && (
<div className="flex flex-wrap gap-2">
{selectedTimezones.map((timezone) => (
<Badge
key={timezone}
variant="primary"
className="cursor-pointer rounded-sm p-1"
<div className="flex flex-wrap gap-2">
{selectedTimezones.map((timezone) => (
<Badge
key={timezone}
variant="primary"
className="flex h-7 cursor-pointer items-center gap-1 rounded-sm p-1 pr-2"
>
<div className="i-mdi:clock-outline" />
{timezone}
<button
onClick={() => handleTimezoneRemove(timezone)}
className="ml-1 hover:text-primary-12"
>
<span className="i-mdi:clock-outline h-4 w-4" />
{timezone}
<span className="i-mdi:close h-4 w-4" />
</Badge>
))}
</div>
)}
<div className="i-mdi:close h-4 w-4" />
</button>
</Badge>
))}

<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="min-w-60 justify-between"
<Select onValueChange={handleTimezoneAdd}>
<SelectTrigger
className="flex h-7 w-7 items-center justify-center rounded-sm border-none bg-primary-9 p-0"
showIcon={false}
>
<span className="i-mdi:earth mr-2 h-5 w-5" />
{selectedTimezones.length === 0
? "Select timezones"
: `${selectedTimezones.length} selected`}
<span className="i-mdi:chevron-down ml-2 h-5 w-5 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[300px] p-0">
<Command>
<CommandInput placeholder="Search timezone..." className="h-9" />
<CommandEmpty>No timezone found.</CommandEmpty>
<CommandList>
<CommandGroup className="max-h-[300px] overflow-auto">
{timezoneOptions.map((tz) => (
<CommandItem
key={tz.value}
value={tz.value}
onSelect={() => handleTimezoneSelect(tz.value)}
>
<div className="flex w-full flex-row items-center">
<div className="flex flex-col">
{tz.label}
<span className="text-muted">
{allTimezones[tz.label]}
</span>
</div>
<div className="ml-auto text-xs text-muted">
(UTC{tz.offset})
</div>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<div className="i-mdi:plus h-7 w-7" />
</SelectTrigger>
<SelectContent>
<SelectGroup className="max-h-[300px] overflow-auto">
{timezoneOptions.map(({ label, value, offset }) => (
<SelectItem
key={value}
value={value}
disabled={selectedTimezones.includes(value)}
>
<div className="flex w-full justify-between">
<span>{label}</span>
<span className="text-muted-foreground ml-2">
(UTC{offset})
</span>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
</div>
);
};

export default TimezoneSelector;
}
54 changes: 37 additions & 17 deletions packages/react/src/routes/about/general.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { AboutHeading } from "@/components/about/Heading";
import StatComponent from "@/components/about/Stats";
import { Loading } from "@/components/common/Loading";
import { darkAtom } from "@/hooks/useTheme";
import { cn } from "@/lib/utils";
import { useQuery } from "@tanstack/react-query";
import { useAtomValue } from "jotai";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -121,7 +122,7 @@ function StatsBlock() {
);
}

const QuickLinks = () => {
export const QuickLinks = () => {
const { t } = useTranslation();

const quickLinks = [
Expand Down Expand Up @@ -163,24 +164,43 @@ const QuickLinks = () => {
];

return (
<div className="flex w-full flex-wrap gap-4 rounded-lg bg-gray-2 p-4">
<div className="flex w-full flex-wrap gap-4 rounded-lg bg-base-2 p-4">
{quickLinks.map((link, index) => (
<a
key={index}
href={link.href}
target="_blank"
rel="noopener noreferrer"
className={`
flex grow basis-1 items-center gap-2 rounded-lg border-2 px-4
py-2 transition-all duration-300 ease-in-out
${link.className}
focus:outline-none focus:ring-2 focus:ring-gray-8 focus:ring-offset-2
`}
>
<span className={link.icon}></span>
<span>{link.label}</span>
</a>
<StyledExternalLink key={index} {...link} />
))}
</div>
);
};

interface StyledExternalLinkProps {
href: string;
icon: string;
label: string;
className?: string;
}

export const StyledExternalLink = ({
href,
icon,
label,
className,
}: StyledExternalLinkProps) => {
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className={cn(
`
flex grow basis-1 items-center gap-2 rounded-lg border-2 px-4
py-2 transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-base-8 focus:ring-offset-2
`,
className,
)}
>
<span className={icon}></span>
<span>{label}</span>
</a>
);
};
Loading

0 comments on commit 0eea657

Please sign in to comment.