feat: apply new style on side-navigation component

inertia/components/visibilty/visibilty.tsx

@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { IoEarthOutline } from 'react-icons/io5';
+import { Visibility } from '../../../app/enums/visibility';
+
+const VisibilityStyle = styled.span(({ theme }) => ({
+  fontWeight: 300,
+  fontSize: '0.6em',
+  color: theme.colors.lightBlue,
+  border: `1px solid ${theme.colors.lightBlue}`,
+  borderRadius: '50px',
+  padding: '0.15em 0.65em',
+  display: 'flex',
+  gap: '0.35em',
+  alignItems: 'center',
+}));
+
+const VisibilityBadge = ({
+  label,
+  visibility,
+}: {
+  label: string;
+  visibility: Visibility;
+}) =>
+  visibility === Visibility.PUBLIC && (
+    <VisibilityStyle>
+      {label} <IoEarthOutline size="1em" />
+    </VisibilityStyle>
+  );
+
+export default VisibilityBadge;