chore: made some reusable components

Author: dastrong-codiga

src/renderer/components/AvatarAndName/AvatarAndName.tsx

@@ -0,0 +1,30 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { Avatar } from '@codiga/components';
+import { PublicUser } from '../../types/userTypes';
+import { getAvatarUrl } from '../../utils/userUtils';
+import UserLink from '../UserLink';
+
+type AvatarAndNameProps = {
+  owner?: PublicUser;
+};
+
+export default function AvatarAndName({ owner = {} }: AvatarAndNameProps) {
+  return (
+    <Flex alignItems="center" gap="space_8">
+      <Avatar
+        size="xs"
+        name={owner?.displayName || 'Anonymous'}
+        src={getAvatarUrl({ id: owner?.id })}
+      />
+      <Text
+        size="xs"
+        noOfLines={1}
+        maxW="300px"
+        display="inline-block"
+        whiteSpace="nowrap"
+      >
+        <UserLink owner={owner} />
+      </Text>
+    </Flex>
+  );
+}

src/renderer/components/AvatarAndName/index.tsx

@@ -0,0 +1 @@
+export { default } from './AvatarAndName';

src/renderer/components/BackButton/BackButton.tsx

@@ -0,0 +1,19 @@
+import { IconButton } from '@chakra-ui/react';
+import { ChevronLeftIcon } from '@codiga/components';
+import { useNavigate } from 'react-router-dom';
+
+export default function BackButton() {
+  const navigate = useNavigate();
+
+  return (
+    <IconButton
+      variant="ghost"
+      onClick={() => navigate(-1)}
+      h="28px"
+      minW="28px"
+      fontSize="12px"
+      icon={<ChevronLeftIcon />}
+      aria-label="go back"
+    />
+  );
+}

src/renderer/components/BackButton/index.tsx

@@ -0,0 +1 @@
+export { default } from './BackButton';

src/renderer/components/FormattedDate/FormattedDate.tsx

@@ -0,0 +1,15 @@
+import { Flex, Text } from '@chakra-ui/react';
+
+type FormattedDateProps = {
+  timestamp: number;
+};
+
+export default function FormattedDate({ timestamp }: FormattedDateProps) {
+  return (
+    <Flex alignItems="center" gap="space_8">
+      <Text size="xs" noOfLines={1}>
+        {new Date(timestamp).toDateString()}
+      </Text>
+    </Flex>
+  );
+}

src/renderer/components/FormattedDate/index.tsx

@@ -0,0 +1 @@
+export { default } from './FormattedDate';

src/renderer/components/PrivacyAndVotes/PrivacyAndVotes.tsx

@@ -0,0 +1,31 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { LockIcon } from '@codiga/components';
+import VotesCurrent from '../VotesCurrent';
+
+type PrivacyAndNotesProps = {
+  isPublic?: boolean;
+  upvotes?: number;
+  downvotes?: number;
+};
+
+export default function PrivacyAndVotes({
+  isPublic = true,
+  upvotes = 0,
+  downvotes = 0,
+}: PrivacyAndNotesProps) {
+  return (
+    <Flex alignItems="center" gap="space_8">
+      <Text
+        size="xs"
+        noOfLines={1}
+        gridGap="space_4"
+        d="flex"
+        alignItems="center"
+      >
+        <LockIcon open={!!isPublic} />
+        {isPublic ? 'Public' : 'Private'}
+      </Text>
+      <VotesCurrent upvotes={upvotes} downvotes={downvotes} />
+    </Flex>
+  );
+}

src/renderer/components/PrivacyAndVotes/index.tsx

@@ -0,0 +1 @@
+export { default } from './PrivacyAndVotes';

src/renderer/components/Uses/Uses.tsx

@@ -0,0 +1,17 @@
+import { Flex, Text } from '@chakra-ui/react';
+import { CodeIcon } from '@codiga/components';
+
+type UsesProps = {
+  count?: number;
+};
+
+export default function Uses({ count = 0 }: UsesProps) {
+  return (
+    <Flex alignItems="center" gap="space_8">
+      <CodeIcon />
+      <Text size="xs" noOfLines={1}>
+        {count}
+      </Text>
+    </Flex>
+  );
+}

src/renderer/components/Uses/index.tsx

@@ -0,0 +1 @@
+export { default } from './Uses';