Skip to content

Commit

Permalink
Merge pull request #19 from inkonchain/feat/review-apps-layout
Browse files Browse the repository at this point in the history 
feat: review of the apps layout, fully split files
  • Loading branch information
@fran-ink
fran-ink authored Feb 4, 2025
2 parents f18c279 + 3857024 commit 0675b1a
Show file tree
Hide file tree
Showing 23 changed files with 930 additions and 257 deletions.
141 changes: 59 additions & 82 deletions src/app/[locale]/(dashboard)/dashboard/_components/AppsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { AddYourAppButton } from "./AddYourAppButton";
import { AppCard } from "./AppCard";
import { AppMainnetToggle } from "./AppMainnetToggle";
import { AppsCategoryFilter } from "./AppsCategoryFilter";
import { AppsGrid } from "./AppsGrid";
import { AppsSideBar } from "./AppsSideBar";
import { AppsTable } from "./AppsTable";
import { AppsTagsFilter } from "./AppsTagsFilter";
Expand All @@ -33,11 +32,10 @@ import "react-multi-carousel/lib/styles.css";
import "./AppsContent.scss";

interface AppsContentProps {
newLayout?: boolean;
currentCategory?: string;
}

export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
export function AppsContent({ currentCategory }: AppsContentProps) {
const router = useRouter();
const searchParams = useSearchParams();
const network = getNetwork(searchParams.get("network"));
Expand Down Expand Up @@ -186,10 +184,10 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {

return (
<>
{/* Floating section on desktop */}
<div
className={classNames(
"hidden xl:fixed xl:flex left-[20%] right-[20%] top-8 justify-center flex-wrap gap-4 mx-4 z-10",
newLayout ? "top-24" : "top-8"
"hidden xl:fixed xl:flex left-[20%] right-[20%] top-8 justify-center flex-wrap gap-4 mx-4 z-10"
)}
>
<div>
Expand All @@ -213,7 +211,6 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
</div>
<div className="min-w-[240px] xl:hidden">
<AppsCategoryFilter
newLayout={newLayout}
selected={filters.categories?.[0]}
setSelected={(value) => {
updateFilters({
Expand All @@ -237,7 +234,6 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
<div className="h-full hidden lg:block shrink-0 fixed left-8 w-[240px]">
<div className="hide-on-very-narrow-screen">
<AppsSideBar
newLayout={newLayout}
selected={filters.categories?.[0] ?? null}
setSelected={(value) => {
updateFilters({
Expand All @@ -248,7 +244,6 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
</div>
<div className="hidden show-on-very-narrow-screen">
<AppsCategoryFilter
newLayout={newLayout}
selected={filters.categories?.[0]}
setSelected={(value) => {
updateFilters({
Expand All @@ -265,10 +260,9 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
<div className="hidden lg:block" />

<div className="flex flex-col gap-8 w-full xl:mx-auto xl:pr-8 max-w-[2000px]">
<div className="mx-6 min-w-[240px] flex items-center lg:hidden flex-wrap gap-2">
<div className="mx-4 min-w-[240px] flex items-center lg:hidden flex-wrap gap-2">
<div className="w-min">
<AppsCategoryFilter
newLayout={newLayout}
selected={filters.categories?.[0]}
setSelected={(value) => {
updateFilters({
Expand All @@ -289,43 +283,48 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
</div>
</div>

<div className={classNames("flex flex-wrap gap-2 mx-6 xl:hidden")}>
<div>
<SearchInput
className="max-w-md"
placeholder="Search"
disabled={!isUnderDesktopWindowSize}
value={search}
onValueChange={setSearch}
/>
</div>
<div>
<AppMainnetToggle
value={filters.network ?? "Both"}
onChange={(value) => {
updateFilters({
network: value,
});
}}
/>
</div>
<div className="hidden lg:block">
<AppsTagsFilter
selected={filters.tags}
setSelected={(value) => {
updateFilters({
tags: value,
});
}}
/>
<div
className={classNames(
"flex flex-wrap justify-between gap-4 mx-4 xl:hidden"
)}
>
<div className="flex flex-wrap gap-2">
<div>
<SearchInput
className="max-w-md"
placeholder="Search"
disabled={!isUnderDesktopWindowSize}
value={search}
onValueChange={setSearch}
/>
</div>
<div>
<AppMainnetToggle
value={filters.network ?? "Both"}
onChange={(value) => {
updateFilters({
network: value,
});
}}
/>
</div>
<div className="hidden lg:block">
<AppsTagsFilter
selected={filters.tags}
setSelected={(value) => {
updateFilters({
tags: value,
});
}}
/>
</div>
</div>
</div>

<div
className={classNames(
"flex justify-between w-full flex-wrap gap-8",
hasActiveFilters(filters) && "hidden lg:flex",
newLayout ? "xl:pt-16" : ""
hasActiveFilters(filters) && "hidden lg:flex"
)}
>
<div className="flex flex-col gap-2 mx-6">
Expand All @@ -345,7 +344,7 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
<div className="flex gap-8 flex-col-reverse 2xl:flex-row">
{/* Apps carousel & table */}
<div className="flex-1 flex flex-col gap-12 overflow-x-hidden">
{!newLayout && !search && (
{!search && (
<div className="flex flex-col gap-4">
<div className="lg:pl-4">
<Carousel
Expand Down Expand Up @@ -392,46 +391,24 @@ export function AppsContent({ newLayout, currentCategory }: AppsContentProps) {
onLoadMore={() => setPage(page + 1)}
hasMore={page < Math.floor(filteredApps.length / 10)}
>
{newLayout ? (
<AppsGrid
apps={appsToDisplay}
featuredApps={inkFeaturedApps}
noAppsFound={
<NoAppsFound
hasSearch={!!search}
resetSearch={() => setSearch("")}
hasActiveFilters={hasActiveFilters(filters)}
resetFilters={() => {
updateFilters({
network: "Mainnet",
categories: [],
tags: [],
});
}}
/>
}
network={network}
/>
) : (
<AppsTable
apps={appsToDisplay}
noAppsFound={
<NoAppsFound
hasSearch={!!search}
resetSearch={() => setSearch("")}
hasActiveFilters={hasActiveFilters(filters)}
resetFilters={() => {
updateFilters({
network: "Mainnet",
categories: [],
tags: [],
});
}}
/>
}
network={network}
/>
)}
<AppsTable
apps={appsToDisplay}
noAppsFound={
<NoAppsFound
hasSearch={!!search}
resetSearch={() => setSearch("")}
hasActiveFilters={hasActiveFilters(filters)}
resetFilters={() => {
updateFilters({
network: "Mainnet",
categories: [],
tags: [],
});
}}
/>
}
network={network}
/>
</InfiniteScrollContainer>
</div>

Expand Down
76 changes: 2 additions & 74 deletions src/app/[locale]/(dashboard)/dashboard/_components/AppsTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import React, {
PropsWithChildren,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import React, { useCallback, useState } from "react";
import Image from "next/image";

import { NoisyContainer } from "@/components/Noisy";
import { classNames } from "@/util/classes";
import { ScrollWithGradient } from "@/components/ScrollWithGradient";

import { AppLinks } from "./AppLinks";
import { InkApp, InkAppNetwork, mainUrl } from "./InkApp";
Expand Down Expand Up @@ -108,69 +102,3 @@ export const AppsTable: React.FC<{
</div>
);
};

const useScrollTracking = ({
scrollRef,
onPercent,
}: {
scrollRef: React.RefObject<HTMLElement | null>;
onPercent: (pct: number, px: number) => void;
}) => {
const [firstLoadDone, setFirstLoadDone] = useState(false);
const handleScroll = useCallback(() => {
if (!scrollRef.current) return;
const scrollElement = scrollRef.current;
const totalOverflow = scrollElement.scrollWidth - scrollElement.clientWidth;
const scrollPosition = scrollElement.scrollLeft;
onPercent((scrollPosition / totalOverflow) * 100, scrollPosition);
}, [scrollRef, onPercent]);

useEffect(() => {
if (!scrollRef.current) return;
const scrollElement = scrollRef.current;
window.addEventListener("resize", handleScroll);
scrollElement.addEventListener("scroll", handleScroll);
return () => {
scrollElement.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleScroll);
};
}, [scrollRef, handleScroll]);
useEffect(() => {
if (!scrollRef.current) return;
if (firstLoadDone) return;
handleScroll();
setFirstLoadDone(true);
}, [scrollRef, handleScroll, firstLoadDone]);
};

const ScrollWithGradient: React.FC<
PropsWithChildren & {
className?: string;
onScroll?: (pct: number, px: number) => void;
}
> = ({ className, children, onScroll: onPercent }) => {
const scrollRef = useRef<HTMLDivElement>(null);
useScrollTracking({
scrollRef,
onPercent: (pct, px) => {
if (!scrollRef.current) return;
onPercent?.(pct, px);
scrollRef.current.style.setProperty(
"--tw-gradient-from-position",
`${Math.max(Math.min(pct + 60, 100), 80)}%`
);
},
});

return (
<div
className={classNames(
"overflow-x-scroll [mask:linear-gradient(to_right,_var(--tw-gradient-stops))] from-80% from-white to-transparent",
className
)}
ref={scrollRef}
>
{children}
</div>
);
};
4 changes: 2 additions & 2 deletions src/app/[locale]/_components/AboutContent/AboutContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,8 @@ export const AboutContent = () => {
<div className="w-full sm:w-fit">
<MainCallToActionButton
copy={{
ctaLabel: t("bridge:cta"),
discordCtaLabel: t("discord:cta"),
bridgeNow: t("bridge:cta"),
exploreApps: t("exploreApps:cta"),
}}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/[locale]/_components/ContactContent/ContactContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export const ContactContent: React.FC<ContactContentProps> = ({}) => {
<MainCallToActionButton
variant="spotlight"
copy={{
ctaLabel: t("bridge:cta"),
discordCtaLabel: t("discord:cta"),
bridgeNow: t("bridge:cta"),
exploreApps: t("exploreApps:cta"),
}}
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/[locale]/_components/DeveloperContent/DeveloperContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,8 +233,8 @@ export const DeveloperContent = () => {
<div className="w-full sm:w-fit">
<MainCallToActionButton
copy={{
ctaLabel: t("bridge:cta"),
discordCtaLabel: t("discord:cta"),
bridgeNow: t("bridge:cta"),
exploreApps: t("exploreApps:cta"),
}}
/>
</div>
Expand Down
Loading

0 comments on commit 0675b1a

Please sign in to comment.