fix: fixing the spaced classNames

This commit is contained in:
dvelo 2024-08-08 18:02:46 -05:00
parent 9303f74b1c
commit c7e14c159b
12 changed files with 99 additions and 101 deletions

@ -3,7 +3,7 @@ import FavoritesView from "@/components/FavoritesView";
export default function Favorites() {
return (
<main>
<div className=" pt-[60px] p-4">
<div className="pt-[60px] p-4">
<FavoritesView />
</div>
</main>

@ -40,7 +40,7 @@ export default function FavoritesView() {
if (loading) {
return (
<>
<Spinner className=" flex items-center" />
<Spinner className="flex items-center" />
<br />
</>
);
@ -54,7 +54,7 @@ export default function FavoritesView() {
Your favorites are empty. Maybe favorite a server!
</div>
)}
<div className=" grid sm:grid-cols-4 gap-4">
<div className="grid sm:grid-cols-4 gap-4">
{apiFavorites.map((server: ServerResponse) => (
<Card key={server.name}>
<CardHeader>
@ -63,7 +63,7 @@ export default function FavoritesView() {
<Button
size="icon"
variant="secondary"
className=" min-w-[128px] max-w-[328px] mb-2 h-[32px] max-md:hidden"
className="min-w-[128px] max-w-[328px] mb-2 h-[32px] max-md:hidden"
onClick={() => {
navigator.clipboard.writeText(
server.name + ".mshf.minehut.gg"
@ -79,7 +79,7 @@ export default function FavoritesView() {
<Button
size="icon"
variant="secondary"
className=" w-[32px] h-[32px] mb-2 ml-2 max-md:hidden"
className="w-[32px] h-[32px] mb-2 ml-2 max-md:hidden"
onClick={() => {
router.push("/server/" + server.name);
}}

@ -21,7 +21,7 @@ export default function IconDisplay(props: { server: any }) {
/>
</TooltipTrigger>
<TooltipContent>
<div className=" font-mono">
<div className="font-mono">
{props.server.icon != null
? props.server.icon.toLowerCase()
: "oak_sign"}
@ -42,7 +42,7 @@ export function IconDisplayClient(props: { server: string }) {
useEffect(() => {
fetch(
"https://api.minehut.com/server/" + props.server + "?byName=true",
"https://api.minehut.com/server/" + props.server + "?byName=true"
).then((b) => b.json().then((c) => setIcon(c.server.icon)));
}, []);
@ -62,7 +62,7 @@ export function IconDisplayClient(props: { server: string }) {
/>
</TooltipTrigger>
<TooltipContent>
<div className=" font-mono">
<div className="font-mono">
{icon != null ? icon.toLowerCase() : "oak_sign"}
</div>
{icon == null && (

@ -40,13 +40,13 @@ export default function ServerCard({ b, motd }: any) {
className="min-h-[450px] max-h-[450px] mb-4 flex items-start"
>
<CardHeader>
<CardTitle className=" m-0">
<CardTitle className="m-0">
<IconDisplay server={b} /> {b.name}{" "}
<Drawer>
<DrawerTrigger>
<Button
size="icon"
className=" w-[24px] h-[24px] ml-2 md:hidden"
className="w-[24px] h-[24px] ml-2 md:hidden"
variant="secondary"
>
<EllipsisVertical size={16} />
@ -67,7 +67,7 @@ export default function ServerCard({ b, motd }: any) {
}}
>
Copy server IP
<Copy size={18} className=" ml-4" />
<Copy size={18} className="ml-4" />
</Button>
<Button
variant="ghost"
@ -81,7 +81,7 @@ export default function ServerCard({ b, motd }: any) {
</DrawerContent>
</Drawer>
{b.author != undefined ? (
<div className=" text-sm text-muted-foreground">
<div className="text-sm text-muted-foreground">
by {b.author}
</div>
) : (
@ -89,11 +89,11 @@ export default function ServerCard({ b, motd }: any) {
)}
<TagShower server={b} />
</CardTitle>
<CardDescription className=" float-left inline">
<span className=" flex items-center">
<CardDescription className="float-left inline">
<span className="flex items-center">
{b.playerData.playerCount == 0 ? (
<div
className=" items-center border"
className="items-center border"
style={{
width: ".5rem",
height: ".5rem",
@ -102,7 +102,7 @@ export default function ServerCard({ b, motd }: any) {
/>
) : (
<div
className=" items-center"
className="items-center"
style={{
backgroundColor: "#0cce6b",
width: ".5rem",
@ -112,7 +112,7 @@ export default function ServerCard({ b, motd }: any) {
/>
)}
<span className=" pl-1">
<span className="pl-1">
{b.playerData.playerCount}{" "}
{b.playerData.playerCount == 1 ? "player" : "players"}{" "}
currently online
@ -125,7 +125,7 @@ export default function ServerCard({ b, motd }: any) {
<Button
size="icon"
variant="secondary"
className=" min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
className="min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
onClick={() => {
navigator.clipboard.writeText(
b.name + ".mshf.minehut.gg"
@ -142,7 +142,7 @@ export default function ServerCard({ b, motd }: any) {
<Button
size="icon"
variant="secondary"
className=" w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
className="w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
>
<Layers size={18} />
</Button>
@ -165,7 +165,7 @@ export default function ServerCard({ b, motd }: any) {
}}
>
Copy server IP
<div className=" RightSlot">
<div className="RightSlot">
<Copy size={18} />
</div>
</ContextMenuItem>
@ -193,7 +193,7 @@ export default function ServerCard({ b, motd }: any) {
}}
>
Copy server IP
<div className=" RightSlot">
<div className="RightSlot">
<Copy size={18} />
</div>
</ContextMenuItem>

@ -108,10 +108,10 @@ export default function ServerList() {
if (loading) {
return (
<>
<Spinner className=" flex items-center" />
<Spinner className="flex items-center" />
<br />
<div
className=" flex justify-center"
className="flex justify-center"
dangerouslySetInnerHTML={{ __html: randomText }}
></div>
</>
@ -120,7 +120,7 @@ export default function ServerList() {
return (
<>
<div className=" max-lg:grid-cols-2 grid grid-cols-3 gap-4 ">
<div className="max-lg:grid-cols-2 grid grid-cols-3 gap-4 ">
<Stat
title="Players online"
desc={serverList.getExtraData().total_players.toString()}
@ -181,7 +181,7 @@ export default function ServerList() {
</Stat>
<Stat
title="Current most popular server (in filter)"
className=" max-lg:col-span-2"
className="max-lg:col-span-2"
desc={
<>
{serverList.currentServers[0] != undefined
@ -197,11 +197,11 @@ export default function ServerList() {
</div>
<br />
<Separator />
<div className=" mt-3 ml-3">
<div className="mt-3 ml-3">
<Button
onClick={() => events.emit("search-request-event")}
variant="secondary"
className=" max-lg:mb-3"
className="max-lg:mb-3"
>
Search{" "}
<code className="ml-2 flex items-center">
@ -211,12 +211,12 @@ export default function ServerList() {
</Button>
<Popover>
<PopoverTrigger>
<Button className=" ml-3" variant="secondary">
<Button className="ml-3" variant="secondary">
Filter
<code className="ml-2">{filters.length}</code>
</Button>
</PopoverTrigger>
<PopoverContent className=" w-[390px] z-3">
<PopoverContent className="w-[390px] z-3">
<RadioGroup
onValueChange={(v) => {
toast.promise(
@ -351,41 +351,41 @@ export default function ServerList() {
}
})()}
>
<div className=" items-top flex space-x-2">
<div className="items-top flex space-x-2">
<RadioGroupItem id="smaller" value="smaller" />
<div className=" grid gap-1.5 leading-none">
<div className="grid gap-1.5 leading-none">
<label
htmlFor="smaller"
className=" text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Only allow smaller servers
</label>
<p className=" text-sm text-muted-foreground">
<p className="text-sm text-muted-foreground">
Server have 15-7 players, cannot be{" "}
<Badge variant="secondary">Always Online</Badge>
</p>
</div>
</div>
<div className=" items-top flex space-x-2">
<div className="items-top flex space-x-2">
<RadioGroupItem id="bigger" value="bigger" />
<div className=" grid gap-1.5 leading-none">
<div className="grid gap-1.5 leading-none">
<label
htmlFor="bigger"
className=" text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Only allow bigger servers
</label>
<p className=" text-sm text-muted-foreground">
<p className="text-sm text-muted-foreground">
Server has 16 players or more
</p>
</div>
</div>
<div className=" items-top flex space-x-2">
<div className="items-top flex space-x-2">
<RadioGroupItem id="none" value="none" />
<div className=" grid gap-1.5 leading-none">
<div className="grid gap-1.5 leading-none">
<label
htmlFor="none"
className=" text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Custom/no requirements
</label>
@ -394,13 +394,13 @@ export default function ServerList() {
</RadioGroup>
<br />
<br />
<strong className=" pb-2">Tags</strong>
<strong className="pb-2">Tags</strong>
<br />
{allTags.map((tag) => (
<div key={tag.docsName}>
{tag.docsName && tag.__filter == undefined && (
<div className=" items-top flex space-x-2 pb-1">
<div className="items-top flex space-x-2 pb-1">
<Checkbox
disabled={templateFilter && tag.__disab != undefined}
id={tag.docsName}
@ -445,12 +445,12 @@ export default function ServerList() {
});
}}
/>
<div className=" grid gap-1.5 leading-none">
<div className="grid gap-1.5 leading-none">
<label
htmlFor={tag.docsName}
className=" text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<Badge variant={tag.role} className=" mr-1">
<Badge variant={tag.role} className="mr-1">
{tag.docsName}
</Badge>
</label>
@ -464,7 +464,7 @@ export default function ServerList() {
<br />
{allCategories.map((categorie) => (
<div
className=" items-top flex space-x-2 pb-1"
className="items-top flex space-x-2 pb-1"
key={categorie.name}
>
<Checkbox
@ -508,12 +508,12 @@ export default function ServerList() {
return nameFilters["c-" + categorie.name];
})()}
/>
<div className=" grid gap-1.5 leading-none">
<div className="grid gap-1.5 leading-none">
<label
htmlFor={categorie.name}
className=" text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
<Badge variant={categorie.role} className=" mr-1">
<Badge variant={categorie.role} className="mr-1">
{categorie.name}
</Badge>
</label>
@ -524,7 +524,7 @@ export default function ServerList() {
</Popover>
<Button
variant="secondary"
className=" md:ml-3 "
className="md:ml-3 "
onClick={() => {
setRandomData(serverList.getRandomServer());
setRandom(true);
@ -534,7 +534,7 @@ export default function ServerList() {
</Button>
<Button
variant="secondary"
className=" ml-3"
className="ml-3"
onClick={() => {
toast.promise(
new Promise((s, e) => {
@ -585,7 +585,7 @@ export default function ServerList() {
<DialogTitle>
<IconDisplay server={randomData} /> {randomData.name}
{randomData.author != undefined ? (
<div className=" text-sm text-muted-foreground">
<div className="text-sm text-muted-foreground">
by {randomData.author}
</div>
) : (
@ -593,11 +593,11 @@ export default function ServerList() {
)}
<TagShower server={randomData} />
</DialogTitle>
<DialogDescription className=" float-left inline">
<span className=" flex items-center">
<DialogDescription className="float-left inline">
<span className="flex items-center">
{randomData.playerData.playerCount == 0 ? (
<div
className=" items-center border"
className="items-center border"
style={{
width: ".5rem",
height: ".5rem",
@ -606,7 +606,7 @@ export default function ServerList() {
/>
) : (
<div
className=" items-center"
className="items-center"
style={{
backgroundColor: "#0cce6b",
width: ".5rem",
@ -616,7 +616,7 @@ export default function ServerList() {
/>
)}
<span className=" pl-1">
<span className="pl-1">
{randomData.playerData.playerCount}{" "}
{randomData.playerData.playerCount == 1
? "player"
@ -628,11 +628,11 @@ export default function ServerList() {
<strong>Server IP</strong>
<br />
<br />
<code className=" border p-3 rounded">
<code className="border p-3 rounded">
{randomData.name}.mshf.minehut.gg{" "}
<Button
size="icon"
className=" ml-1 h-[20px]"
className="ml-1 h-[20px]"
onClick={() => {
setTextCopied(true);
navigator.clipboard.writeText(
@ -643,7 +643,7 @@ export default function ServerList() {
}}
>
{textCopied ? (
<Check size={16} className=" flex items-center" />
<Check size={16} className="flex items-center" />
) : (
<p>Copy</p>
)}
@ -676,7 +676,7 @@ export default function ServerList() {
setLoading(false);
});
}}
loader={<Spinner className=" flex items-center" />}
loader={<Spinner className="flex items-center" />}
endMessage={
<p
style={{ textAlign: "center" }}
@ -766,7 +766,7 @@ export function TagShower(props: { server: OnlineServer; className?: string }) {
</Badge>
</TooltipTrigger>
<TooltipContent>
<div className=" font-normal">
<div className="font-normal">
{t.tooltip}
<br />
Click the tag to learn more about it.

@ -69,7 +69,7 @@ export default function ServerView(props: { server: string }) {
<Spinner className="flex items-center" />
<br />
<div
className=" flex justify-center"
className="flex justify-center"
dangerouslySetInnerHTML={{ __html: randomText }}
></div>
</>
@ -78,9 +78,9 @@ export default function ServerView(props: { server: string }) {
return (
<>
{single.grabOnline() == undefined && (
<div className=" grid pl-4 pr-4">
<div className="grid pl-4 pr-4">
<div
className=" rounded p-2"
className=" rounded p-2"
style={{ backgroundColor: "rgba(244, 63, 94, .16)" }}
>
<strong className="flex items-center">
@ -95,13 +95,13 @@ export default function ServerView(props: { server: string }) {
</div>
)}
<div className=" grid p-4 sm:grid-cols-3 gap-4">
<Card className=" sm:col-span-2">
<div className="grid p-4 sm:grid-cols-3 gap-4">
<Card className="sm:col-span-2">
<BetterHeader>
<CardTitle className=" flex items-center">
<CardTitle className="flex items-center">
{single.grabOnline() == undefined ? (
<div
className=" items-center mr-1"
className="items-center mr-1"
style={{
width: ".75rem",
height: ".75rem",
@ -111,7 +111,7 @@ export default function ServerView(props: { server: string }) {
/>
) : (
<div
className=" items-center mr-1"
className="items-center mr-1"
style={{
width: ".75rem",
height: ".75rem",

@ -10,14 +10,12 @@ export default function Component(props: {
return (
<Card className={props.className}>
{props.children}
<CardHeader className=" flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className=" text-sm font-medium m-0">
{props.title}
</CardTitle>
<props.icon className=" h-4 w-4 text-muted-foreground" />
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium m-0">{props.title}</CardTitle>
<props.icon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className=" text-2xl font-bold">{props.desc}</div>
<div className="text-2xl font-bold">{props.desc}</div>
</CardContent>
</Card>
);

@ -14,17 +14,17 @@ export default function TextFromPathname() {
<>
{pathname == "/" && (
<>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbItem className=" max-sm:hidden">
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem className="max-sm:hidden">
<BreadcrumbPage>Home</BreadcrumbPage>
</BreadcrumbItem>
</>
)}
{pathname?.startsWith("/server") && (
<>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbItem className=" max-sm:hidden">Server</BreadcrumbItem>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem className="max-sm:hidden">Server</BreadcrumbItem>
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem>
<BreadcrumbPage>
{pathname.split("/server/")[1].split("/")[0]}
@ -50,7 +50,7 @@ export default function TextFromPathname() {
)}
{pathname == "/account/favorites" && (
<>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem>
<BreadcrumbPage>Favorites</BreadcrumbPage>
</BreadcrumbItem>
@ -58,7 +58,7 @@ export default function TextFromPathname() {
)}
{pathname == "/account/claim-account" && (
<>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem>
<BreadcrumbPage>Claim Minecraft Account</BreadcrumbPage>
</BreadcrumbItem>
@ -66,7 +66,7 @@ export default function TextFromPathname() {
)}
{pathname == "/account/settings" && (
<>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem>
<BreadcrumbPage>Settings</BreadcrumbPage>
</BreadcrumbItem>
@ -74,7 +74,7 @@ export default function TextFromPathname() {
)}
{pathname == "/legal/external-content-agreement" && (
<>
<BreadcrumbSeparator className=" max-sm:hidden" />
<BreadcrumbSeparator className="max-sm:hidden" />
<BreadcrumbItem>
<BreadcrumbPage>Legal</BreadcrumbPage>
</BreadcrumbItem>

@ -9,31 +9,31 @@ export default function LoggedInPopover() {
const { user } = useUser();
return (
<div className=" grid w-full">
<strong className=" text-center">Logged in as {user?.username}</strong>
<small className=" text-center">
Make comments about servers and favorite servers. Secured by Clerk
<div className="grid w-full">
<strong className="text-center">Logged in as {user?.username}</strong>
<small className="text-center">
Make comments about servers and favorite servers. Secured by Clerk
</small>
<br />
<Button
variant={"ghost"}
onClick={() => router.push("/account/settings")}
>
<UserCog size={18} className=" mr-2" />
<UserCog size={18} className="mr-2" />
Security/Profile settings
</Button>
<Button
variant={"ghost"}
onClick={() => router.push("/account/favorites")}
>
<Star size={18} className=" mr-2" /> Favorites
<Star size={18} className="mr-2" /> Favorites
</Button>
<Button
variant={"ghost"}
className="text-red-500"
onClick={() => clerk.signOut()}
>
<X size={18} className=" mr-2" />
<X size={18} className="mr-2" />
Logout
</Button>
</div>

@ -32,8 +32,8 @@ export default function SignInPopoverButton({
</PopoverTrigger>
<PopoverContent className="w-full">
<div className=" grid w-[200px]">
<strong className=" text-center">Login</strong>
<small className=" text-center">
<strong className="text-center">Login</strong>
<small className="text-center">
Make comments about servers and favorite servers. Secured by Clerk
</small>
<br />

@ -17,7 +17,7 @@ export default function TopBar({ inter }: { inter: string }) {
return (
<>
<SignedOut>
<div className=" mt-1 gap-1 grid grid-cols-5">
<div className="mt-1 gap-1 grid grid-cols-5">
<SignInPopoverButton className="col-span-2" variant="outline" />
<Popover>
<PopoverTrigger>
@ -32,7 +32,7 @@ export default function TopBar({ inter }: { inter: string }) {
<Button variant="ghost" size="icon">
<svg
viewBox="0 0 438.549 438.549"
className=" h-[1.2rem] w-[1.2rem]"
className="h-[1.2rem] w-[1.2rem]"
>
<path
fill="currentColor"
@ -68,7 +68,7 @@ export default function TopBar({ inter }: { inter: string }) {
<Popover>
<PopoverTrigger>
<Button size="icon" variant="ghost" className="mb-1">
<InfoIcon className=" h-[1.2rem] w-[1.2rem]" />
<InfoIcon className="h-[1.2rem] w-[1.2rem]" />
</Button>
</PopoverTrigger>
<PopoverContent>
@ -86,7 +86,7 @@ export default function TopBar({ inter }: { inter: string }) {
>
<svg
viewBox="0 0 438.549 438.549"
className=" h-[1.2rem] w-[1.2rem]"
className="h-[1.2rem] w-[1.2rem]"
>
<path
fill="currentColor"

@ -9,11 +9,11 @@ export function TextCopyComp() {
const [textCopied, setTextCopied] = useState(false);
return (
<code className=" border p-3 rounded">
<code className="border p-3 rounded">
MHSFPV.minehut.gg{" "}
<Button
size="icon"
className=" ml-1 h-[20px]"
className="ml-1 h-[20px]"
onClick={() => {
setTextCopied(true);
navigator.clipboard.writeText("MHSFPV.minehut.gg");
@ -22,7 +22,7 @@ export function TextCopyComp() {
}}
>
{textCopied ? (
<Check size={16} className=" flex items-center" />
<Check size={16} className="flex items-center" />
) : (
<p>Copy</p>
)}