refactored Authentication

src/workspaces/components/Logos/DevSvgLogo.tsx

@@ -0,0 +1,23 @@
+type SvgLogoProps = {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+export function OfficerIconLogo({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig[size];
+
+  return (
+    <img
+      src="/static/officer-icon-square.svg"
+      alt="Officer Icon"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+const sizeConfig = {
+  xs: { width: '120px' },
+  sm: { width: '200px' },
+  md: { width: '400px' },
+  lg: { width: '600px' },
+  xl: { width: '800px' },
+};

src/workspaces/components/Logos/PastilhasSvgLogo.tsx

@@ -0,0 +1,55 @@
+type SvgLogoProps = {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  square?: boolean;
+};
+
+export function OfficerSvgLogo({ size = 'xl', square = false }: SvgLogoProps) {
+  if (square) {
+    return <OfficerSvgLogoSquare size={size} />;
+  }
+
+  return <OfficerSvgLogoRegular size={size} />;
+}
+
+export function OfficerSvgLogoRegular({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig.regular[size];
+
+  return (
+    <img
+      src="/static/officer-logo.svg"
+      alt="Officer Logo"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+export function OfficerSvgLogoSquare({ size = 'xl' }: SvgLogoProps) {
+  const config = sizeConfig.square[size];
+
+  return (
+    <img
+      src="/static/officer-logo-square.svg"
+      alt="Officer Logo"
+      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+    />
+  );
+}
+
+const sizeConfig = {
+  regular: {
+    xs: { width: '180px' },
+    sm: { width: '300px' },
+    md: { width: '600px' },
+    lg: { width: '900px' },
+    xl: { width: '1200px' },
+    '2xl': { width: '1500px' },
+  },
+  square: {
+    xs: { width: '120px' },
+    sm: { width: '200px' },
+    md: { width: '400px' },
+    lg: { width: '600px' },
+    xl: { width: '800px' },
+    '2xl': { width: '1000px' },
+  },
+};

src/workspaces/components/Logos/index.tsx

@@ -0,0 +1,2 @@
+export * from './PastilhasSvgLogo';
+export * from './DevSvgLogo';