@amityco/react-native-social-uikit 4.0.0-03e2bf8.0

package/src/v4/PublicApi/Pages/AmityViewStoryPage/styles.ts

@@ -0,0 +1,225 @@
+import { StyleSheet, useWindowDimensions, Platform } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme() as MyMD3Theme;
+  const { width, height } = useWindowDimensions();
+  const styles = StyleSheet.create({
+    video: {
+      width: width,
+      height: (width * 16) / 9,
+    },
+    container: {
+      flex: 1,
+      width: width,
+      backgroundColor: '#000',
+    },
+    flex: {
+      flex: 1,
+    },
+    flexCol: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    flexRowCenter: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    image: {
+      width: width,
+      height: width * (16 / 9),
+      resizeMode: 'cover',
+    },
+    backgroundContainer: {
+      width: '100%',
+      flex: 1,
+    },
+    spinnerContainer: {
+      position: 'absolute',
+      justifyContent: 'center',
+      backgroundColor: 'black',
+      alignSelf: 'center',
+      width: width,
+      height: height,
+    },
+    animationBarContainer: {
+      flexDirection: 'row',
+      paddingTop: 10,
+      paddingHorizontal: 10,
+    },
+    animationBackground: {
+      height: 2,
+      flex: 1,
+      flexDirection: 'row',
+      backgroundColor: 'rgba(117, 117, 117, 0.5)',
+      marginHorizontal: 2,
+    },
+    userContainer: {
+      height: 50,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: 15,
+    },
+    avatarImage: {
+      height: 35,
+      width: 35,
+      borderRadius: 100,
+    },
+    avatarText: {
+      fontWeight: 'bold',
+      color: 'white',
+      paddingLeft: 10,
+      fontSize: 14,
+    },
+    avatarSubText: {
+      color: theme.colors.background,
+      fontSize: 12,
+    },
+    closeIconContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 50,
+      paddingHorizontal: 15,
+    },
+    menuCloseContaier: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    pressContainer: {
+      flex: 1,
+      flexDirection: 'row',
+    },
+    swipeUpBtn: {
+      position: 'absolute',
+      right: 0,
+      left: 0,
+      alignItems: 'center',
+      bottom: Platform.OS === 'ios' ? 20 : 50,
+    },
+    whiteText: {
+      color: 'white',
+    },
+    threeDotsMenu: {
+      marginRight: 16,
+    },
+    swipeText: {
+      color: 'white',
+      marginTop: 5,
+    },
+    footer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 50,
+      paddingHorizontal: 20,
+    },
+    muteBtn: {
+      width: 30,
+      height: 30,
+      position: 'absolute',
+      top: 80,
+      left: 16,
+    },
+    muteIcon: {
+      width: '100%',
+      height: '100%',
+    },
+    seenContainer: {
+      marginHorizontal: 3,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+      borderRadius: 20,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    iconContainer: {
+      marginHorizontal: 3,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
+      borderRadius: 20,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    seen: {
+      marginLeft: 5,
+      fontSize: 12,
+      color: '#fff',
+    },
+    hyperlinkContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 8,
+      borderColor: theme.colors.baseShade4,
+      borderWidth: 1,
+      backgroundColor: 'rgba(255,255,255,0.8)',
+      borderRadius: 25,
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+      bottom: 30,
+      alignSelf: 'center',
+    },
+    hyperlinkText: {
+      color: theme.colors.base,
+    },
+    error: {
+      textAlign: 'center',
+      color: theme.colors.background,
+    },
+    storyCreateIcon: {
+      position: 'absolute',
+      left: 25,
+      top: 25,
+    },
+    bottomSheet: {
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      backgroundColor: theme.colors.background,
+      width: width,
+      height: 0.7 * height,
+    },
+    deleteBottomSheet: {
+      paddingHorizontal: 16,
+      marginVertical: 8,
+      backgroundColor: theme.colors.background,
+    },
+    deleteBtn: {
+      flexDirection: 'row',
+      backgroundColor: theme.colors.background,
+    },
+    commentBottomSheet: {
+      paddingTop: '10%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+    },
+    handleBar: {
+      width: 0.25 * width,
+      backgroundColor: theme.colors.baseShade4,
+      height: 5,
+      marginVertical: 10,
+      borderRadius: 10,
+    },
+    commentTitle: {
+      fontSize: 17,
+      fontWeight: 'bold',
+      color: theme.colors.base,
+    },
+    horizontalSperator: {
+      width: '100%',
+      backgroundColor: theme.colors.baseShade4,
+      height: 2,
+      marginVertical: 10,
+    },
+    deleteStoryTxt: {
+      color: theme.colors.base,
+      fontSize: 14,
+    },
+  });
+
+  return styles;
+};

package/src/v4/PublicApi/types/index.ts

@@ -0,0 +1,64 @@
+import { PhotoFile, VideoFile } from 'react-native-vision-camera';
+
+export const enum AmityStoryTabComponentEnum {
+  globalFeed = 'globalFeed',
+  communityFeed = 'communityFeed',
+}
+
+export const enum AmityPostComposerMode {
+  CREATE = 'create',
+  EDIT = 'edit',
+}
+
+export enum mediaAttachment {
+  image = 'image',
+  video = 'video',
+  file = 'file',
+}
+
+export type AmityPostCreationOption = {
+  mode?: AmityPostComposerMode.CREATE;
+  targetId?: string;
+  targetType?: Amity.PostTargetType;
+  community?: Amity.Community;
+};
+
+export type AmityPostEditOption = {
+  mode?: AmityPostComposerMode.EDIT;
+  community?: Amity.Community;
+  post?: Amity.Post;
+};
+
+export type AmityPostComposerPageType = {
+  mode?: AmityPostComposerMode;
+  targetId?: string;
+  targetType?: Amity.PostTargetType;
+  community?: Amity.Community;
+  post?: Amity.Post;
+};
+
+// export type AmityPostComposerPageType = {
+//   mode: AmityPostComposerMode;
+//   targetId?: string;
+//   targetType: Amity.PostTargetType;
+//   community?: Amity.Community;
+//   post?: Amity.Post;
+// };
+
+export interface AmityStoryTabComponentType {
+  type: AmityStoryTabComponentEnum;
+  targetId?: string;
+}
+
+export type TAmityStoryMediaType = (PhotoFile | VideoFile | undefined) & {
+  uri: string;
+  name: string;
+};
+
+export interface IAmityDraftStoryPage {
+  targetId: string;
+  targetType: Amity.StoryTargetType;
+  mediaType: TAmityStoryMediaType;
+  onCreateStory?: () => void;
+  onDiscardStory?: () => void;
+}

package/src/v4/assets/icons/arrowDown.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.60156 11.4531L3.03125 6.90625C2.82031 6.67188 2.82031 6.32031 3.03125 6.10938L3.57031 5.57031C3.78125 5.35938 4.13281 5.35938 4.36719 5.57031L8 9.17969L11.6094 5.57031C11.8438 5.35938 12.1953 5.35938 12.4062 5.57031L12.9453 6.10938C13.1562 6.32031 13.1562 6.67188 12.9453 6.90625L8.375 11.4531C8.16406 11.6641 7.8125 11.6641 7.60156 11.4531Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/arrowLeft.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M15.6211 19.9141C15.4453 20.0898 15.1992 20.0898 15.0234 19.9141L7.64062 12.5664C7.5 12.3906 7.5 12.1445 7.64062 11.9688L15.0234 4.62109C15.1992 4.44531 15.4453 4.44531 15.6211 4.62109L16.3242 5.28906C16.4648 5.46484 16.4648 5.74609 16.3242 5.88672L9.96094 12.25L16.3242 18.6484C16.4648 18.7891 16.4648 19.0703 16.3242 19.2461L15.6211 19.9141Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/arrowRight.tsx

@@ -0,0 +1,7 @@
+export const icon =
+  () => `<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.75 3.21875C6.90625 3.0625 7.125 3.0625 7.28125 3.21875L13.8438 9.75C13.9688 9.90625 13.9688 10.125 13.8438 10.2812L7.28125 16.8125C7.125 16.9688 6.90625 16.9688 6.75 16.8125L6.125 16.2188C6 16.0625 6 15.8125 6.125 15.6875L11.7812 10L6.125 4.34375C6 4.21875 6 3.96875 6.125 3.8125L6.75 3.21875Z" fill="currentColor"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/ban.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 28 28"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M24 14.5C24 20.0469 19.5078 24.5 14 24.5C8.45312 24.5 4 20.0469 4 14.5C4 8.99219 8.45312 4.5 14 4.5C19.5078 4.5 24 8.99219 24 14.5ZM7.59375 9.46094C6.5 10.8672 5.875 12.625 5.875 14.5C5.875 18.9922 9.50781 22.625 14 22.625C15.875 22.625 17.6328 22 19.0391 20.9062L7.59375 9.46094ZM22.125 14.5C22.125 10.0469 18.4531 6.375 14 6.375C12.0859 6.375 10.3281 7.03906 8.92188 8.13281L20.3672 19.5781C21.4609 18.1719 22.125 16.4141 22.125 14.5Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/bell.tsx

@@ -0,0 +1,7 @@
+export const icon =
+  () => `<svg width="100%" height="100%" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18.25C6.73438 18.25 5.75 17.2656 5.75 16H10.2148C10.2148 17.2656 9.23047 18.25 8 18.25ZM15.5586 13.0117C15.7695 13.2227 15.875 13.5039 15.875 13.75C15.8398 14.3477 15.418 14.875 14.7148 14.875H1.25C0.546875 14.875 0.125 14.3477 0.125 13.75C0.0898438 13.5039 0.195312 13.2227 0.40625 13.0117C1.07422 12.2734 2.375 11.1836 2.375 7.5625C2.375 4.85547 4.27344 2.67578 6.875 2.11328V1.375C6.875 0.777344 7.36719 0.25 8 0.25C8.59766 0.25 9.08984 0.777344 9.08984 1.375V2.11328C11.6914 2.67578 13.5898 4.85547 13.5898 7.5625C13.5898 11.1836 14.8906 12.2734 15.5586 13.0117Z" fill="currentColor"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/camera.tsx

@@ -0,0 +1,8 @@
+const icon =
+  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.49945L8.99945 3.75H14.9995L16.4995 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/category.tsx

@@ -0,0 +1,16 @@
+export const icon =
+  () => `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7326_1563)">
+<path d="M0 0H56V56H0V0Z" fill="currentColor"/>
+<path d="M39.2 29.4C39.2 28.6562 38.5438 28 37.8 28H30.8C30.0125 28 29.4 28.6562 29.4 29.4V36.4C29.4 37.1875 30.0125 37.8 30.8 37.8H37.8C38.5438 37.8 39.2 37.1875 39.2 36.4V29.4ZM19.6 26.6C16.4938 26.6 14 29.1375 14 32.2C14 35.3062 16.4938 37.8 19.6 37.8C22.6625 37.8 25.2 35.3062 25.2 32.2C25.2 29.1375 22.6625 26.6 19.6 26.6ZM37.7563 23.8C38.85 23.8 39.55 22.6625 38.9813 21.7L34.825 14.7C34.2563 13.7812 32.9 13.7812 32.3313 14.7L28.175 21.7C27.6063 22.6625 28.3063 23.8 29.4 23.8H37.7563Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_7326_1563">
+<path d="M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+
+`;
+
+export default icon;

package/src/v4/assets/icons/check.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  color: string = '#292B32'
+) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5938 4.625C15.75 4.46875 16 4.46875 16.125 4.625L17.0312 5.5C17.1562 5.65625 17.1562 5.90625 17.0312 6.03125L7.65625 15.4062C7.5 15.5625 7.28125 15.5625 7.125 15.4062L2.9375 11.25C2.8125 11.0938 2.8125 10.8438 2.9375 10.7188L3.84375 9.8125C3.96875 9.6875 4.21875 9.6875 4.375 9.8125L7.375 12.8438L15.5938 4.625Z" fill="${color}"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/checkbox.tsx

@@ -0,0 +1,24 @@
+export const checkboxUnchecked =
+  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12Z" fill="currentColor"/>
+</svg>
+
+`;
+
+export const checkboxUncheckedDisabled =
+  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12Z" fill="currentColor"/>
+</svg>
+`;
+
+export const checkboxChecked =
+  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25ZM10.9805 16.8906L17.4492 10.4219C17.6602 10.2109 17.6602 9.82422 17.4492 9.61328L16.6406 8.83984C16.4297 8.59375 16.0781 8.59375 15.8672 8.83984L10.5938 14.1133L8.09766 11.6523C7.88672 11.4062 7.53516 11.4062 7.32422 11.6523L6.51562 12.4258C6.30469 12.6367 6.30469 13.0234 6.51562 13.2344L10.1719 16.8906C10.3828 17.1016 10.7695 17.1016 10.9805 16.8906Z" fill="currentColor"/>
+</svg>
+`;
+
+export const checkboxCheckedDisabled =
+  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25ZM10.9805 16.8906L17.4492 10.4219C17.6602 10.2109 17.6602 9.82422 17.4492 9.61328L16.6406 8.83984C16.4297 8.59375 16.0781 8.59375 15.8672 8.83984L10.5938 14.1133L8.09766 11.6523C7.88672 11.4062 7.53516 11.4062 7.32422 11.6523L6.51562 12.4258C6.30469 12.6367 6.30469 13.0234 6.51562 13.2344L10.1719 16.8906C10.3828 17.1016 10.7695 17.1016 10.9805 16.8906Z" fill="currentColor"/>
+</svg>
+`;

package/src/v4/assets/icons/close.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M13.6523 12.25L17.4492 16.0469C17.6602 16.2578 17.6602 16.6445 17.4492 16.8555L16.5703 17.7344C16.3594 17.9453 15.9727 17.9453 15.7617 17.7344L12 13.9375L8.20312 17.7344C7.99219 17.9453 7.60547 17.9453 7.39453 17.7344L6.51562 16.8555C6.30469 16.6445 6.30469 16.2578 6.51562 16.0469L10.3125 12.25L6.51562 8.48828C6.30469 8.27734 6.30469 7.89062 6.51562 7.67969L7.39453 6.80078C7.60547 6.58984 7.99219 6.58984 8.20312 6.80078L12 10.5977L15.7617 6.80078C15.9727 6.58984 16.3594 6.58984 16.5703 6.80078L17.4492 7.67969C17.6602 7.89062 17.6602 8.27734 17.4492 8.48828L13.6523 12.25Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/commentNotification.tsx

@@ -0,0 +1,7 @@
+const icon = () => `
+<svg width="100%" height="100%" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.5625 6.5625C6.16016 6.5625 6.65234 7.08984 6.65234 7.6875C6.65234 8.32031 6.16016 8.8125 5.5625 8.8125C4.92969 8.8125 4.4375 8.32031 4.4375 7.6875C4.4375 7.08984 4.92969 6.5625 5.5625 6.5625ZM9.5 6.5625C10.0977 6.5625 10.5898 7.08984 10.5898 7.6875C10.5898 8.25 10.0625 8.77734 9.5 8.77734C8.90234 8.77734 8.375 8.28516 8.375 7.6875C8.375 7.05469 8.86719 6.5625 9.5 6.5625ZM13.4375 6.5625C14.0352 6.5625 14.5625 7.08984 14.5273 7.6875C14.5273 8.32031 14.0352 8.8125 13.4375 8.8125C12.8398 8.8125 12.3125 8.32031 12.3125 7.6875C12.3125 7.08984 12.8047 6.5625 13.4375 6.5625ZM9.5 0.375C14.457 0.375 18.4648 3.71484 18.4648 7.72266C18.4648 11.7305 14.457 15 9.5 15C8.33984 15 7.21484 14.8242 6.23047 14.5078C5.17578 15.2461 3.48828 16.125 1.34375 16.125C0.992188 16.125 0.675781 15.9492 0.570312 15.5977C0.464844 15.2812 0.5 14.9297 0.746094 14.6836C0.746094 14.6836 1.83594 13.4883 2.36328 12.1172C1.20312 10.8867 0.5 9.33984 0.5 7.6875C0.5 3.64453 4.50781 0.375 9.5 0.375ZM9.5 13.3125C13.5078 13.3125 16.7422 10.8164 16.7422 7.6875C16.7422 4.59375 13.4727 2.0625 9.46484 2.0625C5.45703 2.0625 2.1875 4.59375 2.1875 7.6875C2.1875 9.19922 2.92578 10.3242 3.55859 10.9922L4.29688 11.7656L3.91016 12.75C3.73438 13.2422 3.48828 13.7344 3.20703 14.1562C4.05078 13.875 4.75391 13.4883 5.24609 13.1367L5.91406 12.6445L6.72266 12.8906C7.60156 13.1719 8.55078 13.3125 9.5 13.3125Z" fill="currentColor"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/community.tsx

@@ -0,0 +1,9 @@
+export const icon = (
+  color: string = 'white'
+) => `<svg width="64" height="38" viewBox="0 0 64 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 0C34.4754 0 36.8493 0.961753 38.5997 2.67368C40.35 4.38561 41.3333 6.70749 41.3333 9.12853C41.3333 11.5496 40.35 13.8714 38.5997 15.5834C36.8493 17.2953 34.4754 18.2571 32 18.2571C29.5246 18.2571 27.1507 17.2953 25.4003 15.5834C23.65 13.8714 22.6667 11.5496 22.6667 9.12853C22.6667 6.70749 23.65 4.38561 25.4003 2.67368C27.1507 0.961753 29.5246 0 32 0ZM13.3333 6.52038C14.8267 6.52038 16.2133 6.9116 17.4133 7.6158C17.0133 11.3455 18.1333 15.049 20.4267 17.9441C19.0933 20.4479 16.4267 22.1693 13.3333 22.1693C11.2116 22.1693 9.17677 21.3449 7.67648 19.8776C6.17619 18.4102 5.33333 16.42 5.33333 14.3448C5.33333 12.2697 6.17619 10.2795 7.67648 8.8121C9.17677 7.34473 11.2116 6.52038 13.3333 6.52038ZM50.6667 6.52038C52.7884 6.52038 54.8232 7.34473 56.3235 8.8121C57.8238 10.2795 58.6667 12.2697 58.6667 14.3448C58.6667 16.42 57.8238 18.4102 56.3235 19.8776C54.8232 21.3449 52.7884 22.1693 50.6667 22.1693C47.5733 22.1693 44.9067 20.4479 43.5733 17.9441C45.8667 15.049 46.9867 11.3455 46.5867 7.6158C47.7867 6.9116 49.1733 6.52038 50.6667 6.52038ZM14.6667 33.2539C14.6667 27.855 22.4267 23.4734 32 23.4734C41.5733 23.4734 49.3333 27.855 49.3333 33.2539V37.8182H14.6667V33.2539ZM0 37.8182V33.906C0 30.2806 5.04 27.2291 11.8667 26.3423C10.2933 28.1159 9.33333 30.5675 9.33333 33.2539V37.8182H0ZM64 37.8182H54.6667V33.2539C54.6667 30.5675 53.7067 28.1159 52.1333 26.3423C58.96 27.2291 64 30.2806 64 33.906V37.8182Z" fill="${color}"/>
+</svg>
+
+`;
+
+export default icon;

package/src/v4/assets/icons/cross.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  color: string = '#292B32'
+) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.75 13.7188C15.0312 14.0312 15.0312 14.5 14.75 14.7812C14.4375 15.0938 13.9688 15.0938 13.6875 14.7812L10 11.0625L6.28125 14.7812C5.96875 15.0938 5.5 15.0938 5.21875 14.7812C4.90625 14.5 4.90625 14.0312 5.21875 13.7188L8.9375 10L5.21875 6.28125C4.90625 5.96875 4.90625 5.5 5.21875 5.21875C5.5 4.90625 5.96875 4.90625 6.25 5.21875L10 8.96875L13.7188 5.25C14 4.9375 14.4688 4.9375 14.75 5.25C15.0625 5.53125 15.0625 6 14.75 6.3125L11.0312 10L14.75 13.7188Z" fill="${color}"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/demote.tsx

@@ -0,0 +1,7 @@
+const icon =
+  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1289 13.9375C17.7305 13.9375 19.875 16.082 19.875 18.6836V19.5625C19.875 20.5117 19.1016 21.25 18.1875 21.25H5.8125C4.86328 21.25 4.125 20.5117 4.125 19.5625V18.6836C4.125 16.082 6.23438 13.9375 8.83594 13.9375C9.85547 13.9375 10.3125 14.5 12 14.5C13.6523 14.5 14.1094 13.9375 15.1289 13.9375ZM18.1875 19.5625V18.6836C18.1875 16.9961 16.8164 15.625 15.1289 15.625C14.6016 15.625 13.793 16.1875 12 16.1875C10.1719 16.1875 9.36328 15.625 8.83594 15.625C7.14844 15.625 5.8125 16.9961 5.8125 18.6836V19.5625H18.1875ZM12 13.375C9.1875 13.375 6.9375 11.125 6.9375 8.3125C6.9375 5.53516 9.1875 3.25 12 3.25C14.7773 3.25 17.0625 5.53516 17.0625 8.3125C17.0625 11.125 14.7773 13.375 12 13.375ZM12 4.9375C10.1367 4.9375 8.625 6.48438 8.625 8.3125C8.625 10.1758 10.1367 11.6875 12 11.6875C13.8281 11.6875 15.375 10.1758 15.375 8.3125C15.375 6.48438 13.8281 4.9375 12 4.9375Z" fill="currentColor"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/dot.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  color: string = '#1054DE'
+) => `<svg width="6" height="7" viewBox="0 0 6 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3" cy="3.5" r="3" fill="${color}"/>
+</svg>`;
+
+export default icon;

package/src/v4/assets/icons/emptyCommunity.tsx

@@ -0,0 +1,32 @@
+type IconProps = {
+  backgroundColor?: string;
+  itemBorderColor?: string;
+  avatarColor?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+};
+
+export const icon = ({
+  backgroundColor = '#EBECEF',
+  itemBorderColor = '#EBECEF',
+  avatarColor = '#A5A9B5',
+  titleColor = '#A5A9B5',
+  descriptionColor = '#A5A9B5',
+}: IconProps) => `<svg width="161" height="161" viewBox="0 0 161 161" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M130.1 24.5H34.0996C29.6813 24.5 26.0996 28.0817 26.0996 32.5V128.5C26.0996 132.918 29.6813 136.5 34.0996 136.5H130.1C134.518 136.5 138.1 132.918 138.1 128.5V32.5C138.1 28.0817 134.518 24.5 130.1 24.5Z" fill="${backgroundColor}"/>
+<path d="M43.6997 68.2H44.1997H151.7C152.628 68.2 153.518 68.5687 154.175 69.2251C154.831 69.8815 155.2 70.7717 155.2 71.7V91.7C155.2 92.6282 154.831 93.5184 154.175 94.1748C153.518 94.8312 152.628 95.2 151.7 95.2H43.6997C42.7714 95.2 41.8812 94.8312 41.2248 94.1748C40.5685 93.5184 40.1997 92.6282 40.1997 91.7V71.7C40.1997 70.7717 40.5685 69.8815 41.2248 69.2251C41.8812 68.5687 42.7714 68.2 43.6997 68.2Z" fill="white" stroke="#EBECEF"/>
+<path opacity="0.3" d="M90.8997 74.0999H70.0997C68.7742 74.0999 67.6997 75.1744 67.6997 76.4999C67.6997 77.8253 68.7742 78.8999 70.0997 78.8999H90.8997C92.2252 78.8999 93.2997 77.8253 93.2997 76.4999C93.2997 75.1744 92.2252 74.0999 90.8997 74.0999Z" fill="${titleColor}"/>
+<path opacity="0.15" d="M105.3 84.5H70.0997C68.7742 84.5 67.6997 85.5745 67.6997 86.9C67.6997 88.2255 68.7742 89.3 70.0997 89.3H105.3C106.625 89.3 107.7 88.2255 107.7 86.9C107.7 85.5745 106.625 84.5 105.3 84.5Z" fill="${descriptionColor}"/>
+<path d="M53.6996 89.3001C57.897 89.3001 61.2996 85.8975 61.2996 81.7001C61.2996 77.5027 57.897 74.1001 53.6996 74.1001C49.5022 74.1001 46.0996 77.5027 46.0996 81.7001C46.0996 85.8975 49.5022 89.3001 53.6996 89.3001Z" fill="${avatarColor}"/>
+<path d="M9.2998 102.6H9.7998H117.3C118.228 102.6 119.118 102.969 119.775 103.625C120.431 104.282 120.8 105.172 120.8 106.1V126.1C120.8 127.028 120.431 127.919 119.775 128.575C119.118 129.231 118.228 129.6 117.3 129.6H9.2998C8.37155 129.6 7.48131 129.231 6.82493 128.575C6.16855 127.919 5.7998 127.028 5.7998 126.1V106.1C5.7998 105.172 6.16855 104.282 6.82493 103.625C7.48131 102.969 8.37155 102.6 9.2998 102.6Z" fill="white" stroke="#EBECEF"/>
+<path opacity="0.3" d="M56.4998 108.5H35.6998C34.3743 108.5 33.2998 109.575 33.2998 110.9C33.2998 112.225 34.3743 113.3 35.6998 113.3H56.4998C57.8253 113.3 58.8998 112.225 58.8998 110.9C58.8998 109.575 57.8253 108.5 56.4998 108.5Z" fill="${titleColor}"/>
+<path opacity="0.15" d="M70.8998 118.9H35.6998C34.3743 118.9 33.2998 119.974 33.2998 121.3C33.2998 122.625 34.3743 123.7 35.6998 123.7H70.8998C72.2253 123.7 73.2998 122.625 73.2998 121.3C73.2998 119.974 72.2253 118.9 70.8998 118.9Z" fill="${descriptionColor}"/>
+<path d="M19.2997 123.7C23.4971 123.7 26.8997 120.297 26.8997 116.1C26.8997 111.903 23.4971 108.5 19.2997 108.5C15.1023 108.5 11.6997 111.903 11.6997 116.1C11.6997 120.297 15.1023 123.7 19.2997 123.7Z" fill="${avatarColor}"/>
+<path d="M9.2998 33.8H117.3C119.233 33.8 120.8 35.3671 120.8 37.3V57.3C120.8 59.233 119.233 60.8 117.3 60.8H9.2998C7.36681 60.8 5.7998 59.233 5.7998 57.3V37.3C5.7998 35.3671 7.36681 33.8 9.2998 33.8Z" fill="white" stroke="${itemBorderColor}"/>
+<path opacity="0.3" d="M54.8997 39.7002H34.0997C32.7742 39.7002 31.6997 40.7747 31.6997 42.1002C31.6997 43.4257 32.7742 44.5002 34.0997 44.5002H54.8997C56.2252 44.5002 57.2997 43.4257 57.2997 42.1002C57.2997 40.7747 56.2252 39.7002 54.8997 39.7002Z" fill="${titleColor}"/>
+<path opacity="0.15" d="M69.2997 50.1001H34.0997C32.7742 50.1001 31.6997 51.1746 31.6997 52.5001C31.6997 53.8256 32.7742 54.9001 34.0997 54.9001H69.2997C70.6252 54.9001 71.6997 53.8256 71.6997 52.5001C71.6997 51.1746 70.6252 50.1001 69.2997 50.1001Z" fill="${descriptionColor}"/>
+<path d="M19.2997 54.9002C23.4971 54.9002 26.8997 51.4976 26.8997 47.3002C26.8997 43.1028 23.4971 39.7002 19.2997 39.7002C15.1023 39.7002 11.6997 43.1028 11.6997 47.3002C11.6997 51.4976 15.1023 54.9002 19.2997 54.9002Z" fill="${avatarColor}"/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/emptyImagePost.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  color = '#EBECEF'
+) => `<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6875 23.75C15.8398 23.75 13.625 21.5352 13.625 18.6875C13.625 15.9453 15.8398 13.625 18.6875 13.625C21.4297 13.625 23.75 15.9453 23.75 18.6875C23.75 21.5352 21.4297 23.75 18.6875 23.75ZM18.6875 17C17.7383 17 17 17.8438 17 18.6875C17 19.6367 17.7383 20.375 18.6875 20.375C19.5312 20.375 20.375 19.6367 20.375 18.6875C20.375 17.8438 19.5312 17 18.6875 17ZM50.75 6.875C52.543 6.875 54.125 8.45703 54.125 10.25V50.75C54.125 52.6484 52.543 54.125 50.75 54.125H10.25C8.35156 54.125 6.875 52.6484 6.875 50.75V10.25C6.875 8.45703 8.35156 6.875 10.25 6.875H50.75ZM50.75 50.75V42.3125H10.25V50.75H50.75ZM15.8398 38.9375H24.2773L25.543 37.25L21.3242 31.6602L15.8398 38.9375ZM28.4961 38.9375H44.5273L36.5117 28.2852L28.4961 38.9375ZM50.75 38.9375V10.25H10.25V38.9375H11.6211L19.9531 27.8633C20.5859 27.0195 21.957 27.0195 22.6953 27.8633L27.6523 34.5078L35.1406 24.4883C35.7734 23.6445 37.1445 23.6445 37.8828 24.4883L48.7461 38.9375H50.75Z" fill="${color}"/>
+</svg>`;
+
+export default icon;

package/src/v4/assets/icons/emptyList.tsx

@@ -0,0 +1,7 @@
+const emptyList = () =>
+  `<svg width="100%" height="100%" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.25 15.0625C9.30078 15.0625 8.5625 14.3242 8.5625 13.375C8.5625 12.5312 9.30078 11.6875 10.25 11.6875C11.0938 11.6875 11.9375 12.5312 11.9375 13.375C11.9375 14.3242 11.0938 15.0625 10.25 15.0625ZM10.25 20.125C6.45312 20.125 3.5 17.1719 3.5 13.375C3.5 9.68359 6.45312 6.625 10.25 6.625C13.9414 6.625 17 9.68359 17 13.375C17 17.1719 13.9414 20.125 10.25 20.125ZM13.625 13.375C13.625 11.582 12.043 10 10.25 10C8.35156 10 6.875 11.582 6.875 13.375C6.875 15.2734 8.35156 16.75 10.25 16.75C12.043 16.75 13.625 15.2734 13.625 13.375ZM23.75 13.375C23.75 12.5312 24.4883 11.6875 25.4375 11.6875H55.8125C56.6562 11.6875 57.5 12.5312 57.5 13.375C57.5 14.3242 56.6562 15.0625 55.8125 15.0625H25.4375C24.4883 15.0625 23.75 14.3242 23.75 13.375ZM23.75 30.25C23.75 29.4062 24.4883 28.5625 25.4375 28.5625H55.8125C56.6562 28.5625 57.5 29.4062 57.5 30.25C57.5 31.1992 56.6562 31.9375 55.8125 31.9375H25.4375C24.4883 31.9375 23.75 31.1992 23.75 30.25ZM23.75 47.125C23.75 46.2812 24.4883 45.4375 25.4375 45.4375H55.8125C56.6562 45.4375 57.5 46.2812 57.5 47.125C57.5 48.0742 56.6562 48.8125 55.8125 48.8125H25.4375C24.4883 48.8125 23.75 48.0742 23.75 47.125ZM10.25 23.5C13.9414 23.5 17 26.5586 17 30.25C17 34.0469 13.9414 37 10.25 37C6.45312 37 3.5 34.0469 3.5 30.25C3.5 26.5586 6.45312 23.5 10.25 23.5ZM6.875 30.25C6.875 32.1484 8.35156 33.625 10.25 33.625C12.043 33.625 13.625 32.1484 13.625 30.25C13.625 28.457 12.043 26.875 10.25 26.875C8.35156 26.875 6.875 28.457 6.875 30.25ZM10.25 53.875C6.45312 53.875 3.5 50.9219 3.5 47.125C3.5 43.4336 6.45312 40.375 10.25 40.375C13.9414 40.375 17 43.4336 17 47.125C17 50.9219 13.9414 53.875 10.25 53.875ZM13.625 47.125C13.625 45.332 12.043 43.75 10.25 43.75C8.35156 43.75 6.875 45.332 6.875 47.125C6.875 49.0234 8.35156 50.5 10.25 50.5C12.043 50.5 13.625 49.0234 13.625 47.125Z" fill="currentColor"/>
+</svg>
+`;
+
+export default emptyList;

package/src/v4/assets/icons/emptyPost.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  color = '#EBECEF'
+) => `<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.3438 10.25C59.7148 10.25 60.875 11.4102 60.875 12.7812V48.2188C60.875 49.6953 59.7148 50.75 58.3438 50.75H5.1875C2.33984 50.75 0.125 48.5352 0.125 45.6875V16.1562C0.125 14.7852 1.17969 13.625 2.65625 13.625H6.875V12.7812C6.875 11.4102 7.92969 10.25 9.40625 10.25H58.3438ZM3.5 45.6875C3.5 46.6367 4.23828 47.375 5.1875 47.375C6.03125 47.375 6.875 46.6367 6.875 45.6875V17H3.5V45.6875ZM57.5 47.375V13.625H10.25V45.6875C10.25 45.793 10.1445 45.793 10.1445 45.793C10.1445 46.3203 10.1445 46.9531 9.93359 47.375H57.5ZM14.8906 37.25C14.1523 37.25 13.625 36.7227 13.625 35.9844V18.2656C13.625 17.6328 14.1523 17 14.8906 17H32.6094C33.2422 17 33.875 17.6328 33.875 18.2656V35.9844C33.875 36.7227 33.2422 37.25 32.6094 37.25H14.8906ZM17 20.375V33.875H30.5V20.375H17ZM13.625 42.7344V41.8906C13.625 41.2578 14.1523 40.625 14.8906 40.625H32.6094C33.2422 40.625 33.875 41.2578 33.875 41.8906V42.7344C33.875 43.4727 33.2422 44 32.6094 44H14.8906C14.1523 44 13.625 43.4727 13.625 42.7344ZM37.25 42.7344V41.8906C37.25 41.2578 37.7773 40.625 38.5156 40.625H52.8594C53.4922 40.625 54.125 41.2578 54.125 41.8906V42.7344C54.125 43.4727 53.4922 44 52.8594 44H38.5156C37.7773 44 37.25 43.4727 37.25 42.7344ZM37.25 35.9844V35.1406C37.25 34.5078 37.7773 33.875 38.5156 33.875H52.8594C53.4922 33.875 54.125 34.5078 54.125 35.1406V35.9844C54.125 36.7227 53.4922 37.25 52.8594 37.25H38.5156C37.7773 37.25 37.25 36.7227 37.25 35.9844ZM37.25 22.4844V21.6406C37.25 21.0078 37.7773 20.375 38.5156 20.375H52.8594C53.4922 20.375 54.125 21.0078 54.125 21.6406V22.4844C54.125 23.2227 53.4922 23.75 52.8594 23.75H38.5156C37.7773 23.75 37.25 23.2227 37.25 22.4844ZM37.25 29.2344V28.3906C37.25 27.7578 37.7773 27.125 38.5156 27.125H52.8594C53.4922 27.125 54.125 27.7578 54.125 28.3906V29.2344C54.125 29.9727 53.4922 30.5 52.8594 30.5H38.5156C37.7773 30.5 37.25 29.9727 37.25 29.2344Z" fill="${color}"/>
+</svg>`;
+
+export default icon;

package/src/v4/assets/icons/emptyVideoPost.tsx

@@ -0,0 +1,7 @@
+export const icon = (
+  color = '#EBECEF'
+) => `<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.0195 20.375C55.8125 20.375 57.5 21.7461 57.5 23.75V50.8555C57.5 52.7539 55.8125 54.125 54.0195 54.125C53.3867 54.125 52.6484 53.9141 52.1211 53.5977L44 47.9023V49.0625C44 51.9102 41.6797 54.125 38.9375 54.125H8.5625C5.71484 54.125 3.5 51.9102 3.5 49.0625V25.4375C3.5 22.6953 5.71484 20.375 8.5625 20.375H10.25V15.3125C10.25 10.6719 13.9414 6.875 18.6875 6.875H36.4062C36.8281 6.875 37.25 7.29688 37.25 7.71875V9.40625C37.25 9.93359 36.8281 10.25 36.4062 10.25H18.6875C15.8398 10.25 13.625 12.5703 13.625 15.3125V20.375H38.9375C41.6797 20.375 44 22.6953 44 25.4375V26.7031L52.1211 21.0078C52.6484 20.6914 53.3867 20.4805 54.0195 20.375V23.75L44 30.8164V43.7891L54.0195 50.75L54.125 23.75L54.0195 20.375ZM40.625 49.0625V25.4375C40.625 24.5938 39.7812 23.75 38.9375 23.75H8.5625C7.61328 23.75 6.875 24.5938 6.875 25.4375V49.0625C6.875 50.0117 7.61328 50.75 8.5625 50.75H38.9375C39.7812 50.75 40.625 50.0117 40.625 49.0625ZM36.5117 27.125C36.9336 27.2305 37.1445 27.4414 37.25 27.8633V29.8672C37.1445 30.2891 36.9336 30.5 36.5117 30.5H10.8828C10.4609 30.5 10.25 30.2891 10.25 29.8672V27.8633C10.25 27.4414 10.4609 27.2305 10.8828 27.125H36.5117Z" fill="${color}"/>
+</svg>`;
+
+export default icon;

package/src/v4/assets/icons/errorPage.tsx

@@ -0,0 +1,10 @@
+export const icon = (
+  color = '#EBECEF'
+) => `<svg width="61" height="42" viewBox="0 0 61 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.3438 0.75C59.7148 0.75 60.875 1.91016 60.875 3.28125V38.7188C60.875 40.1953 59.7148 41.25 58.3438 41.25H5.1875C2.33984 41.25 0.125 39.0352 0.125 36.1875V6.65625C0.125 5.28516 1.17969 4.125 2.65625 4.125H6.875V3.28125C6.875 1.91016 7.92969 0.75 9.40625 0.75H58.3438ZM3.5 36.1875C3.5 37.1367 4.23828 37.875 5.1875 37.875C6.03125 37.875 6.875 37.1367 6.875 36.1875V7.5H3.5V36.1875ZM57.5 37.875V4.125H10.25V36.1875V36.293C10.25 36.7148 10.0391 37.4531 9.93359 37.875H57.5Z" fill="${color}"/>
+<path d="M36.1875 21L39.3125 24.1562C39.7188 24.5312 39.7188 25.1562 39.3125 25.5312L38.625 26.2188C38.25 26.625 37.625 26.625 37.25 26.2188L34.125 23.0938L30.9688 26.2188C30.5938 26.625 29.9688 26.625 29.5938 26.2188L28.9062 25.5312C28.5 25.1562 28.5 24.5312 28.9062 24.1562L32.0312 21L28.9062 17.875C28.5 17.5 28.5 16.875 28.9062 16.5L29.5938 15.8125C29.9688 15.4062 30.5938 15.4062 30.9688 15.8125L34.125 18.9375L37.25 15.8125C37.625 15.4062 38.25 15.4062 38.625 15.8125L39.3125 16.5C39.7188 16.875 39.7188 17.5 39.3125 17.875L36.1875 21Z" fill="${color}"/>
+</svg>
+
+`;
+
+export default icon;

package/src/v4/assets/icons/exclamation.tsx

@@ -0,0 +1,15 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 33 33"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M16.5 4.78375C23.1094 4.78375 28.5 10.1744 28.5 16.7838C28.5 23.44 23.1094 28.7838 16.5 28.7838C9.84375 28.7838 4.5 23.44 4.5 16.7838C4.5 10.1744 9.84375 4.78375 16.5 4.78375ZM16.5 26.5338C21.8438 26.5338 26.25 22.1744 26.25 16.7838C26.25 11.44 21.8438 7.03375 16.5 7.03375C11.1094 7.03375 6.75 11.44 6.75 16.7838C6.75 22.1744 11.1094 26.5338 16.5 26.5338ZM16.5 19.0338C15.8438 19.0338 15.375 18.565 15.375 17.9088V11.9088C15.375 11.2994 15.8438 10.7838 16.5 10.7838C17.1094 10.7838 17.625 11.2994 17.625 11.9088V17.9088C17.625 18.565 17.1094 19.0338 16.5 19.0338ZM16.5 20.6275C17.2969 20.6275 17.9531 21.2838 17.9531 22.0806C17.9531 22.8775 17.2969 23.5338 16.5 23.5338C15.6562 23.5338 15 22.8775 15 22.0806C15 21.2838 15.6562 20.6275 16.5 20.6275Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/featured.tsx

@@ -0,0 +1,14 @@
+const icon = ({
+  color,
+  backgroundColor,
+}: {
+  color?: string;
+  backgroundColor?: string;
+}) => `
+  <svg width="73" height="26" viewBox="0 0 73 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H69C71.2091 0 73 1.79086 73 4V22C73 24.2091 71.2091 26 69 26H0V0Z" fill=${backgroundColor}/>
+<path d="M9.12988 18V8.84033H14.9697V10.2178H10.7676V12.9282H14.6079V14.2612H10.7676V18H9.12988ZM19.5108 18.1396C18.821 18.1396 18.2286 17.9937 17.7335 17.7017C17.2426 17.4097 16.8638 16.995 16.5972 16.4575C16.3306 15.9201 16.1973 15.2832 16.1973 14.5469V14.5405C16.1973 13.8127 16.3285 13.1779 16.5909 12.6362C16.8575 12.0946 17.2341 11.6756 17.7208 11.3794C18.2074 11.0789 18.7787 10.9287 19.4346 10.9287C20.0948 10.9287 20.6619 11.0747 21.1358 11.3667C21.614 11.6545 21.9822 12.0586 22.2403 12.5791C22.4985 13.0996 22.6275 13.709 22.6275 14.4072V14.9277H16.9908V13.8677H21.8531L21.1041 14.8579V14.2295C21.1041 13.7682 21.0343 13.3853 20.8946 13.0806C20.755 12.7759 20.5603 12.5474 20.3106 12.395C20.0652 12.2427 19.7795 12.1665 19.4537 12.1665C19.1278 12.1665 18.838 12.2469 18.5841 12.4077C18.3344 12.5643 18.1355 12.797 17.9874 13.106C17.8435 13.4106 17.7716 13.7852 17.7716 14.2295V14.8643C17.7716 15.2917 17.8435 15.6577 17.9874 15.9624C18.1313 16.2629 18.3344 16.4956 18.5968 16.6606C18.8634 16.8215 19.1786 16.9019 19.5426 16.9019C19.8261 16.9019 20.0694 16.8617 20.2725 16.7812C20.4799 16.6966 20.6471 16.5972 20.774 16.4829C20.901 16.3644 20.9898 16.2523 21.0406 16.1465L21.0596 16.1021H22.5577L22.545 16.1592C22.49 16.3835 22.3884 16.612 22.2403 16.8447C22.0964 17.0732 21.8997 17.2869 21.65 17.4858C21.4045 17.6805 21.1041 17.8392 20.7486 17.9619C20.3931 18.0804 19.9805 18.1396 19.5108 18.1396ZM26.0197 18.1143C25.5838 18.1143 25.1924 18.0296 24.8454 17.8604C24.5026 17.6911 24.2318 17.452 24.0329 17.1431C23.8382 16.8299 23.7409 16.4618 23.7409 16.0386V16.0259C23.7409 15.6154 23.8424 15.262 24.0456 14.9658C24.2487 14.6654 24.547 14.4305 24.9406 14.2612C25.3341 14.092 25.8123 13.9925 26.3752 13.9629L28.9396 13.8042V14.8452L26.5973 14.9976C26.153 15.0229 25.825 15.116 25.6134 15.2769C25.4018 15.4377 25.2961 15.6619 25.2961 15.9497V15.9624C25.2961 16.2586 25.4082 16.4893 25.6325 16.6543C25.861 16.8193 26.1509 16.9019 26.5021 16.9019C26.8195 16.9019 27.103 16.8384 27.3527 16.7114C27.6024 16.5845 27.7991 16.4131 27.943 16.1973C28.0869 15.9772 28.1588 15.7297 28.1588 15.4546V13.2583C28.1588 12.9113 28.0488 12.6468 27.8288 12.4648C27.6087 12.2786 27.2829 12.1855 26.8512 12.1855C26.4915 12.1855 26.1974 12.249 25.9689 12.376C25.7404 12.4987 25.5859 12.6743 25.5055 12.9028L25.4992 12.9282H24.0075L24.0138 12.8711C24.0646 12.4818 24.217 12.1411 24.4709 11.8491C24.7248 11.5571 25.0612 11.3307 25.4801 11.1699C25.8991 11.0091 26.3815 10.9287 26.9274 10.9287C27.5283 10.9287 28.0361 11.0218 28.4508 11.208C28.8656 11.39 29.1808 11.6566 29.3966 12.0078C29.6125 12.3548 29.7204 12.7716 29.7204 13.2583V18H28.1588V17.0479H28.0509C27.924 17.2679 27.7589 17.4583 27.5558 17.6191C27.3569 17.7799 27.1284 17.9027 26.8703 17.9873C26.6121 18.0719 26.3286 18.1143 26.0197 18.1143ZM34.2678 18.0317C33.4722 18.0317 32.8988 17.8857 32.5476 17.5938C32.1964 17.3018 32.0207 16.8236 32.0207 16.1592V12.2871H30.9416V11.062H32.0207V9.36084H33.6267V11.062H35.0867V12.2871H33.6267V15.7847C33.6267 16.1274 33.6986 16.3792 33.8425 16.54C33.9906 16.6966 34.2276 16.7749 34.5535 16.7749C34.6677 16.7749 34.7608 16.7728 34.8328 16.7686C34.9089 16.7601 34.9936 16.7516 35.0867 16.7432V17.9619C34.9766 17.9831 34.8497 18 34.7058 18.0127C34.5662 18.0254 34.4202 18.0317 34.2678 18.0317ZM38.8851 18.1396C38.3688 18.1396 37.935 18.0402 37.5838 17.8413C37.2326 17.6382 36.9681 17.3441 36.7904 16.959C36.6126 16.5697 36.5238 16.0999 36.5238 15.5498V11.062H38.1043V15.188C38.1043 15.7254 38.2101 16.1296 38.4217 16.4004C38.6333 16.6712 38.9782 16.8066 39.4564 16.8066C39.7103 16.8066 39.9346 16.7686 40.1292 16.6924C40.3281 16.612 40.4932 16.4977 40.6243 16.3496C40.7555 16.2015 40.855 16.0238 40.9227 15.8164C40.9904 15.6048 41.0242 15.3678 41.0242 15.1055V11.062H42.6048V18H41.0242V16.9463H40.9163C40.8105 17.1917 40.6624 17.4054 40.472 17.5874C40.2816 17.7651 40.053 17.9027 39.7864 18C39.5198 18.0931 39.2194 18.1396 38.8851 18.1396ZM44.4545 18V11.062H46.0351V12.1284H46.143C46.2615 11.756 46.473 11.4661 46.7777 11.2588C47.0867 11.0514 47.4696 10.9478 47.9267 10.9478C48.0451 10.9478 48.1615 10.9562 48.2758 10.9731C48.3943 10.9858 48.4916 11.0028 48.5678 11.0239V12.4395C48.4408 12.4098 48.3117 12.3887 48.1806 12.376C48.0536 12.359 47.9203 12.3506 47.7807 12.3506C47.4294 12.3506 47.1226 12.4162 46.8603 12.5474C46.5979 12.6785 46.3948 12.8669 46.2509 13.1123C46.107 13.3535 46.0351 13.6392 46.0351 13.9692V18H44.4545ZM52.5757 18.1396C51.8859 18.1396 51.2934 17.9937 50.7983 17.7017C50.3074 17.4097 49.9287 16.995 49.6621 16.4575C49.3955 15.9201 49.2622 15.2832 49.2622 14.5469V14.5405C49.2622 13.8127 49.3934 13.1779 49.6557 12.6362C49.9223 12.0946 50.299 11.6756 50.7856 11.3794C51.2723 11.0789 51.8436 10.9287 52.4995 10.9287C53.1596 10.9287 53.7267 11.0747 54.2007 11.3667C54.6789 11.6545 55.047 12.0586 55.3052 12.5791C55.5633 13.0996 55.6924 13.709 55.6924 14.4072V14.9277H50.0556V13.8677H54.9179L54.1689 14.8579V14.2295C54.1689 13.7682 54.0991 13.3853 53.9595 13.0806C53.8198 12.7759 53.6251 12.5474 53.3755 12.395C53.13 12.2427 52.8444 12.1665 52.5185 12.1665C52.1927 12.1665 51.9028 12.2469 51.6489 12.4077C51.3992 12.5643 51.2003 12.797 51.0522 13.106C50.9083 13.4106 50.8364 13.7852 50.8364 14.2295V14.8643C50.8364 15.2917 50.9083 15.6577 51.0522 15.9624C51.1961 16.2629 51.3992 16.4956 51.6616 16.6606C51.9282 16.8215 52.2435 16.9019 52.6074 16.9019C52.8909 16.9019 53.1343 16.8617 53.3374 16.7812C53.5447 16.6966 53.7119 16.5972 53.8388 16.4829C53.9658 16.3644 54.0547 16.2523 54.1054 16.1465L54.1245 16.1021H55.6225L55.6098 16.1592C55.5548 16.3835 55.4533 16.612 55.3052 16.8447C55.1613 17.0732 54.9645 17.2869 54.7148 17.4858C54.4694 17.6805 54.1689 17.8392 53.8135 17.9619C53.458 18.0804 53.0454 18.1396 52.5757 18.1396ZM59.6939 18.1143C59.1184 18.1143 58.6169 17.9704 58.1895 17.6826C57.7621 17.3906 57.432 16.9759 57.1993 16.4385C56.9665 15.901 56.8502 15.2684 56.8502 14.5405V14.5278C56.8502 13.7915 56.9644 13.1567 57.1929 12.6235C57.4257 12.0861 57.7536 11.6735 58.1768 11.3857C58.6042 11.0938 59.1099 10.9478 59.6939 10.9478C60.0113 10.9478 60.3075 10.9985 60.5826 11.1001C60.8576 11.1974 61.0989 11.3371 61.3062 11.519C61.5178 11.701 61.6828 11.9168 61.8013 12.1665H61.9156V8.37695H63.4898V18H61.9156V16.9146H61.8013C61.6744 17.1642 61.5072 17.38 61.2999 17.562C61.0967 17.7397 60.8598 17.8773 60.5889 17.9746C60.3181 18.0677 60.0198 18.1143 59.6939 18.1143ZM60.189 16.7812C60.5487 16.7812 60.8576 16.6924 61.1158 16.5146C61.3781 16.3327 61.5792 16.0745 61.7188 15.7402C61.8627 15.4017 61.9346 15.0018 61.9346 14.5405V14.5278C61.9346 14.0623 61.8627 13.6624 61.7188 13.3281C61.5792 12.9938 61.3781 12.7357 61.1158 12.5537C60.8576 12.3717 60.5487 12.2808 60.189 12.2808C59.8336 12.2808 59.5246 12.3717 59.2623 12.5537C59.0041 12.7314 58.8052 12.9896 58.6656 13.3281C58.5259 13.6624 58.4561 14.0623 58.4561 14.5278V14.5405C58.4561 15.006 58.5259 15.4059 58.6656 15.7402C58.8052 16.0745 59.0041 16.3327 59.2623 16.5146C59.5204 16.6924 59.8293 16.7812 60.189 16.7812Z" fill=${color}/>
+</svg>
+`;
+
+export default icon;

package/src/v4/assets/icons/feed.tsx

@@ -0,0 +1,8 @@
+export const icon = (
+  color: string = '#292B32'
+) => `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.71875 14.5C8.22656 14.5 7.875 14.1484 7.875 13.6562C7.875 13.1992 8.22656 12.8125 8.71875 12.8125H16.0312C16.4883 12.8125 16.875 13.1992 16.875 13.6562C16.875 14.1484 16.4883 14.5 16.0312 14.5H8.71875ZM8.71875 17.875C8.22656 17.875 7.875 17.5234 7.875 17.0312C7.875 16.5742 8.22656 16.1875 8.71875 16.1875H12.6562C13.1133 16.1875 13.5 16.5742 13.5 17.0312C13.5 17.5234 13.1133 17.875 12.6562 17.875H8.71875ZM8.71875 11.125C8.22656 11.125 7.875 10.7734 7.875 10.2812C7.875 9.82422 8.22656 9.4375 8.71875 9.4375H16.0312C16.4883 9.4375 16.875 9.82422 16.875 10.2812C16.875 10.7734 16.4883 11.125 16.0312 11.125H8.71875ZM18 3.25C19.2305 3.25 20.25 4.26953 20.25 5.5V19C20.25 20.2656 19.2305 21.25 18 21.25H6.75C5.48438 21.25 4.5 20.2656 4.5 19V5.5C4.5 4.26953 5.48438 3.25 6.75 3.25H18ZM18.5625 19V7.75H6.1875V19C6.1875 19.3164 6.43359 19.5625 6.75 19.5625H18C18.2812 19.5625 18.5625 19.3164 18.5625 19Z" fill="${color}"/>
+</svg>
+`;
+
+export default icon;