Merge pull request #410 from storytold/bflat-fy-tabs-component-padding

padding prop for tab content

packages/fakeyou.com/src/components/common/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ interface TabProps {
   label: string;
   content?: React.ReactNode;
   icon?: IconDefinition;
+  padding?: boolean;
 }
 
 interface TabsProps {
@@ -18,6 +19,7 @@ interface TabsProps {
 
 interface TabContentProps {
   children: React.ReactNode;
+  padding?: boolean;
 }
 
 function Tab({ to, label, icon, onClick }: TabProps & { onClick: () => void }) {
@@ -36,14 +38,15 @@ function Tab({ to, label, icon, onClick }: TabProps & { onClick: () => void }) {
   );
 }
 
-function TabContent({ children }: TabContentProps) {
-  return <div className="tab-content">{children}</div>;
+function TabContent({ children, padding }: TabContentProps) {
+  const paddingClasses = padding ? "p-3 py-4 p-md-4" : "";
+  return <div className={`tab-content ${paddingClasses}`}>{children}</div>;
 }
 
 function Tabs({ tabs }: TabsProps) {
   const location = useLocation();
   const currentPath = location.pathname;
-  const initialTab = tabs.find((tab) => tab.to === currentPath) || tabs[0];
+  const initialTab = tabs.find(tab => tab.to === currentPath) || tabs[0];
   const [activeTab, setActiveTab] = useState(initialTab.to);
 
   const [fade, setFade] = useSpring(() => ({
@@ -68,10 +71,12 @@ function Tabs({ tabs }: TabsProps) {
     setTimeout(() => setActiveTab(tabTo), 50);
   };
 
+  const activeTabProps = tabs.find(tab => tab.to === activeTab);
+
   return (
     <nav>
       <ul className="nav nav-tabs">
-        {tabs.map((tab) => (
+        {tabs.map(tab => (
           <Tab
             key={tab.to}
             to={tab.to}
@@ -81,8 +86,8 @@ function Tabs({ tabs }: TabsProps) {
           />
         ))}
       </ul>
-      <TabContent>
-        {tabs.map((tab) => (
+      <TabContent padding={activeTabProps?.padding}>
+        {tabs.map(tab => (
           <a.div
             key={tab.to}
             style={fade}

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/NewProfilePage.tsx

@@ -62,7 +62,7 @@ function NewProfilePage(this: any, props: Props) {
   const [userData, setUserData] = useState<User | undefined>(undefined);
   const [notFoundState, setNotFoundState] = useState<boolean>(false);
 
-  const getUser = useCallback(async (username) => {
+  const getUser = useCallback(async username => {
     const response = await GetUserByUsername(username);
     if (GetUserByUsernameIsOk(response)) {
       setUserData(response);
@@ -359,18 +359,21 @@ function NewProfilePage(this: any, props: Props) {
       label: "Media",
       content: <MediaTab />,
       icon: faPhotoFilmMusic,
+      padding: true,
     },
     {
       to: `/dev-profile/${username}/weights`,
       label: "Weights",
       content: <WeightsTab />,
       icon: faLayerGroup,
+      padding: true,
     },
     {
       to: `/dev-profile/${username}/bookmarks`,
       label: "Bookmarks",
       content: <BookmarksTab />,
       icon: faBookmark,
+      padding: true,
     },
   ];
 

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx

@@ -3,7 +3,6 @@ import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
-import Panel from "components/common/Panel";
 import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import mockWeightsData from "./mockWeightsData";
@@ -15,7 +14,7 @@ export default function BookmarksTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
 
   return (
-    <Panel clear={true} padding={true}>
+    <>
       <AudioPlayerProvider>
         {isLoading ? (
           <div className="row gx-3 gy-3">
@@ -52,6 +51,6 @@ export default function BookmarksTab() {
           </MasonryGrid>
         )}
       </AudioPlayerProvider>
-    </Panel>
+    </>
   );
 }

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx

@@ -4,7 +4,6 @@ import mockMediaData from "./mockMediaData";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
-import Panel from "components/common/Panel";
 import { Select } from "components/common/Inputs/Inputs";
 import {
   faArrowDownWideShort,
@@ -33,7 +32,7 @@ export default function MediaTab() {
   ];
 
   return (
-    <Panel clear={true} padding={true}>
+    <>
       <div className="d-flex gap-2 mb-3">
         <Select
           icon={faArrowDownWideShort}
@@ -84,6 +83,6 @@ export default function MediaTab() {
           </MasonryGrid>
         )}
       </AudioPlayerProvider>
-    </Panel>
+    </>
   );
 }

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx

@@ -4,7 +4,6 @@ import mockWeightsData from "./mockWeightsData";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
-import Panel from "components/common/Panel";
 import { Select } from "components/common/Inputs/Inputs";
 import {
   faArrowDownWideShort,
@@ -32,7 +31,7 @@ export default function WeightsTab() {
   ];
 
   return (
-    <Panel clear={true} padding={true}>
+    <>
       <div className="d-flex gap-2 mb-3">
         <Select
           icon={faArrowDownWideShort}
@@ -81,6 +80,6 @@ export default function WeightsTab() {
           })}
         </MasonryGrid>
       )}
-    </Panel>
+    </>
   );
 }