Merge pull request #2023 from sahilmob/staging

feat(kibbeh): ProfileHeaderWrapper component

kibbeh/src/stories/ProfileHeaderWrapper.story.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Story } from "@storybook/react";
+import profileCover from "./img/profile-cover.png";
+
+import {
+  ProfileHeaderWrapper,
+  ProfileHeaderWrapperProps,
+} from "../ui/ProfileHeaderWrapper";
+
+export default {
+  title: "ProfileHeaderWrapper",
+  component: ProfileHeaderWrapper,
+};
+
+const ProfileHeaderChildren = () => (
+  <div className="text-accent">Profile header content</div>
+);
+
+ProfileHeaderWrapper.defaultProps = {
+  coverUrl: profileCover,
+  children: <ProfileHeaderChildren />,
+};
+
+export const Main: Story<ProfileHeaderWrapperProps> = ({ ...props }) => (
+  <ProfileHeaderWrapper {...props} />
+);

kibbeh/src/ui/ProfileHeaderWrapper.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+
+export interface ProfileHeaderWrapperProps {
+  children: ReactNode;
+  coverUrl: string;
+}
+
+export const ProfileHeaderWrapper: React.FC<ProfileHeaderWrapperProps> = ({
+  children,
+  coverUrl,
+  ...props
+}) => {
+  return (
+    <div className="bg-primary-800 rounded-8" {...props}>
+      <img
+        alt="cover"
+        src={coverUrl}
+        className="rounded-t-8 w-full object-cover"
+      />
+      <div className="p-4">{children}</div>
+    </div>
+  );
+};