Added TraineeIdentifiers

src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TraineeIdentifiers } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof TraineeIdentifiers> = {
+  component: TraineeIdentifiers,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  args: {
+    name: "bath-reality-midnight",
+    id: "2d0d1e36-7331-4176-bf35-59241fabde78",
+    loading: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TraineeIdentifiers>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {},
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const NoName: Story = {
+  args: {
+    name: undefined,
+  },
+};

src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.tsx

@@ -0,0 +1,37 @@
+import { Identicon, Skeleton } from "@howso/react-tailwind-flowbite-components";
+import { ComponentProps, FC } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TraineeIdentifiersProps = ComponentProps<"div"> & {
+  id?: string;
+  name?: string;
+  loading?: boolean;
+};
+export const TraineeIdentifiers: FC<TraineeIdentifiersProps> = ({
+  id,
+  name,
+  loading,
+  ...props
+}) => {
+  const primary = name || id;
+  const secondary = name && id ? id : undefined;
+
+  return (
+    <div
+      {...props}
+      className={twMerge(props.className, "flex flex-row items-center gap-4")}
+    >
+      <Identicon id={id} loading={loading} className="h-[32px]" />
+      <div className="truncate">
+        <div className="text-sm font-medium truncate">
+          {loading ? <Skeleton variant="text" className="w-32" /> : primary}
+        </div>
+        {(loading || secondary) && (
+          <div className="text-xs truncate">
+            {loading ? <Skeleton variant="text" className="w-64" /> : secondary}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/Trainee/TraineeIdentifiers/index.ts

@@ -0,0 +1 @@
+export * from "./TraineeIdentifiers";

src/components/Trainee/index.ts

@@ -3,6 +3,7 @@ import { Languages } from "../../constants";
 import { TraineeCreationStepperI18nBundle } from "./TraineeCreationStepper";
 
 export * from "./TraineeCreationStepper";
+export * from "./TraineeIdentifiers";
 
 export const TraineeI18nBundles: I18nBundle<Languages, any>[] = [
   TraineeCreationStepperI18nBundle,