ronantakizawa/codereview-bench huggingface dataset:
Repository: babel/babel
File: packages/babel-cli/src/babel/options.ts (TypeScript)

Code before:
);
program.option(
  "--no-copy-ignored",
  "Exclude ignored files when copying non-compilable files.",
);

program.option(
  "--verbose",
  "Log everything. This option conflicts with --quiet",
);
program.option(
  "--quiet",
  "Don't log anything. This option conflicts with --verbose",
);
program.option(
  "--delete-dir-on-start",
  "Delete the out directory before compilation.",
);
program.option(
  "--out-file-extension [string]",
  "Use a specific extension for the output files",
);

program.version(PACKAGE_JSON.version + " (@babel/core " + version + ")");
program.usage("[options] <files ...>");
// register an empty action handler so that program.js can throw on
// unknown options _after_ args
// see https://github.com/tj/program.js/issues/561#issuecomment-522209408
program.action(() => {});

export type CmdOptions = {
  babelOptions: InputOptions;
  cliOptions: {
    filename: string;
    filenames: string[];
    extensions: string[];
    keepFileExtension: boolean;
    outFileExtension: string;
    watch: boolean;
    skipInitialBuild: boolean;
    outFile: string;
    outDir: string;
    relative: boolean;
    copyFiles: boolean;
    copyIgnored: boolean;
    includeDotfiles: boolean;
    verbose: boolean;
    quiet: boolean;
    deleteDirOnStart: boolean;
    sourceMapTarget: string;
  };

Review comment (suggestion):
The usage is updated from `<files...>` to `[files...]`, because in the REPL `-e` mode, the `files` argument is not required.

Code after:
);
program.option(
  "--no-copy-ignored",
  "Exclude ignored files when copying non-compilable files.",
);

program.option(
  "--verbose",
  "Log everything. This option conflicts with --quiet",
);
program.option(
  "--quiet",
  "Don't log anything. This option conflicts with --verbose",
);
program.option(
  "--delete-dir-on-start",
  "Delete the out directory before compilation.",
);
program.option(
  "--out-file-extension [string]",
  "Use a specific extension for the output files",
);
program.argument("[files...]", "List of files to compile.");

program.version(PACKAGE_JSON.version + " (@babel/core " + version + ")");
program.usage("[options] [files...]");

export type CmdOptions = {
  babelOptions: InputOptions;
  cliOptions: {
    filename: string;
    filenames: string[];
    extensions: string[];
    keepFileExtension: boolean;
    outFileExtension: string;
    watch: boolean;
    skipInitialBuild: boolean;
    outFile: string;
    outDir: string;
    relative: boolean;
    copyFiles: boolean;
    copyIgnored: boolean;
    includeDotfiles: boolean;
    verbose: boolean;
    quiet: boolean;
    deleteDirOnStart: boolean;
    sourceMapTarget: string;
  };
};

export default function parseArgv(args: string[]): CmdOptions | null {
Repository: babel/babel
File: Makefile.source.ts (TypeScript)

Code before:
target["build"] = function () {
  target["build-no-bundle"]();

  if (process.env.BABEL_COVERAGE !== "true") {
    target["build-standalone"]();
  }
};

target["build-standalone"] = function () {
  yarn(["gulp", "build-babel-standalone"]);
};

target["build-bundle"] = function () {
  target["clean"]();
  target["clean-lib"]();

  yarn(["gulp", "build"]);

  target["build-dist"]();
};

target["build-no-bundle"] = function () {
  target["clean"]();
  target["clean-lib"]();

  env(
    () => {
      yarn(["gulp", "build-dev"]);
    },
    { BABEL_ENV: "development" }
  );

  target["build-dist"]();
};

target["build-flow-typings"] = function () {
  writeFileSync(
    "packages/babel-types/lib/index.js.flow",
    node(["packages/babel-types/scripts/generators/flow.ts"], undefined, false)
  );
};

target["build-dist"] = function () {
  target["build-plugin-transform-runtime-dist"]();
};

target["build-plugin-transform-runtime-dist"] = function () {
  node(["scripts/build-dist.ts"], "packages/babel-plugin-transform-runtime");
};

target["prepublish"] = function () {

Review comment (performance):
Will a type error interrupt the build?
I'm a little worried that this will slow down `build-no-bundle`.


Code after:
target["build"] = function () {
  target["build-no-bundle"]();

  if (process.env.BABEL_COVERAGE !== "true") {
    target["build-standalone"]();
  }
};

target["build-standalone"] = function () {
  yarn(["gulp", "build-babel-standalone"]);
};

target["build-bundle"] = function () {
  target["clean"]();
  target["clean-lib"]();
  target["bundle-babel-parser-dts"]();

  yarn(["gulp", "build"]);

  target["build-dist"]();
};

target["build-no-bundle"] = function () {
  target["clean"]();
  target["clean-lib"]();
  target["bundle-babel-parser-dts"]();

  env(
    () => {
      yarn(["gulp", "build-dev"]);
    },
    { BABEL_ENV: "development" }
  );

  target["build-dist"]();
};

target["build-flow-typings"] = function () {
  writeFileSync(
    "packages/babel-types/lib/index.js.flow",
    node(["packages/babel-types/scripts/generators/flow.ts"], undefined, false)
  );
};

target["build-dist"] = function () {
  target["build-plugin-transform-runtime-dist"]();
};

target["build-plugin-transform-runtime-dist"] = function () {
  node(["scripts/build-dist.ts"], "packages/babel-plugin-transform-runtime");
};
Repository: babel/babel
File: packages/babel-parser/src/parser/statement.ts (TypeScript)

Code before:
          );
        }
      } else {
        expr = this.parseIdentifier(false);

        while (this.eat(tt.dot)) {
          const node = this.startNodeAt<N.MemberExpression>(startLoc);
          node.object = expr;
          if (this.match(tt.privateName)) {
            this.classScope.usePrivateName(
              this.state.value,
              this.state.startLoc,
            );
            node.property = this.parsePrivateName();
          } else {
            node.property = this.parseIdentifier(true);
          }
          node.computed = false;
          expr = this.finishNode(node, "MemberExpression");
        }

        node.expression = this.parseMaybeDecoratorArguments(expr, startLoc);
      }
    } else {
      node.expression =
        ((this.state.canStartArrow = false), this.parseExprSubscripts());
    }
    return this.finishNode(node, "Decorator");
  }

  parseMaybeDecoratorArguments(
    this: Parser,
    expr: N.Expression,
    startLoc: Position,
  ): N.Expression {
    if (this.eat(tt.parenL)) {
      const node = this.startNodeAt<N.CallExpression>(startLoc);
      node.callee = expr;
      node.arguments = this.parseCallExpressionArguments();
      this.toReferencedList(node.arguments);
      return this.finishNode(node, "CallExpression");
    }

    return expr;
  }

  parseBreakContinueStatement(
    node: Undone<N.Node>,
    isBreak: true,
  ): N.BreakStatement;
  parseBreakContinueStatement(

Review comment (suggestion):
```suggestion
      this.state.canStartArrow = false;
      node.expression = this.parseExprSubscripts();
```

Code after:
          );
        }
      } else {
        expr = this.parseIdentifier(false);

        while (this.eat(tt.dot)) {
          const node = this.startNodeAt<N.MemberExpression>(startLoc);
          node.object = expr;
          if (this.match(tt.privateName)) {
            this.classScope.usePrivateName(
              this.state.value,
              this.state.startLoc,
            );
            node.property = this.parsePrivateName();
          } else {
            node.property = this.parseIdentifier(true);
          }
          node.computed = false;
          expr = this.finishNode(node, "MemberExpression");
        }

        node.expression = this.parseMaybeDecoratorArguments(expr, startLoc);
      }
    } else {
      this.state.canStartArrow = false;
      node.expression = this.parseExprSubscripts();
    }
    return this.finishNode(node, "Decorator");
  }

  parseMaybeDecoratorArguments(
    this: Parser,
    expr: N.Expression,
    startLoc: Position,
  ): N.Expression {
    if (this.eat(tt.parenL)) {
      const node = this.startNodeAt<N.CallExpression>(startLoc);
      node.callee = expr;
      node.arguments = this.parseCallExpressionArguments();
      this.toReferencedList(node.arguments);
      return this.finishNode(node, "CallExpression");
    }

    return expr;
  }

  parseBreakContinueStatement(
    node: Undone<N.Node>,
    isBreak: true,
  ): N.BreakStatement;
  parseBreakContinueStatement(
Repository: babel/babel
File: packages/babel-parser/src/parser/statement.ts (TypeScript)

Code before:

  parseClassId(
    node: Undone<N.Class>,
    isStatement: boolean,
    optionalId?: boolean | null,
    bindingType: BindingFlag = BindingFlag.TYPE_CLASS,
  ): void {
    if (tokenIsIdentifier(this.state.type)) {
      node.id = this.parseIdentifier();
      if (isStatement) {
        this.declareNameFromIdentifier(node.id, bindingType);
      }
    } else {
      if (optionalId || !isStatement) {
        node.id = null;
      } else {
        throw this.raise(Errors.MissingClassName, this.state.startLoc);
      }
    }
  }

  // https://tc39.es/ecma262/#prod-ClassHeritage
  parseClassSuper(this: Parser, node: Undone<N.Class>): void {
    node.superClass = this.eat(tt._extends)
      ? ((this.state.canStartArrow = false), this.parseExprSubscripts())
      : null;
  }

  // Parses module export declaration.
  // https://tc39.es/ecma262/#prod-ExportDeclaration

  parseExport(
    this: Parser,
    node: Undone<
      | N.ExportDefaultDeclaration
      | N.ExportAllDeclaration
      | N.ExportNamedDeclaration
    >,
    decorators: N.Decorator[] | null | undefined,
  ): N.AnyExport {
    const maybeDefaultIdentifier = this.parseMaybeImportPhase(
      node,
      /* isExport */ true,
    );
    const hasDefault = this.maybeParseExportDefaultSpecifier(
      node,
      maybeDefaultIdentifier,
    );
    const parseAfterDefault = !hasDefault || this.eat(tt.comma);
    const hasStar = parseAfterDefault && this.eatExportStar(node);
    const hasNamespace =

Review comment (suggestion):
```suggestion
    if (this.eat(tt._extends)) {
      this.state.canStartArrow = false;
      node.superClass = this.parseExprSubscripts();
    } else {
      node.superClass = null;
    }
```

Code after:

  parseClassId(
    node: Undone<N.Class>,
    isStatement: boolean,
    optionalId?: boolean | null,
    bindingType: BindingFlag = BindingFlag.TYPE_CLASS,
  ): void {
    if (tokenIsIdentifier(this.state.type)) {
      node.id = this.parseIdentifier();
      if (isStatement) {
        this.declareNameFromIdentifier(node.id, bindingType);
      }
    } else {
      if (optionalId || !isStatement) {
        node.id = null;
      } else {
        throw this.raise(Errors.MissingClassName, this.state.startLoc);
      }
    }
  }

  // https://tc39.es/ecma262/#prod-ClassHeritage
  parseClassSuper(this: Parser, node: Undone<N.Class>): void {
    if (this.eat(tt._extends)) {
      this.state.canStartArrow = false;
      node.superClass = this.parseExprSubscripts();
    } else {
      node.superClass = null;
    }
  }

  // Parses module export declaration.
  // https://tc39.es/ecma262/#prod-ExportDeclaration

  parseExport(
    this: Parser,
    node: Undone<
      | N.ExportDefaultDeclaration
      | N.ExportAllDeclaration
      | N.ExportNamedDeclaration
    >,
    decorators: N.Decorator[] | null | undefined,
  ): N.AnyExport {
    const maybeDefaultIdentifier = this.parseMaybeImportPhase(
      node,
      /* isExport */ true,
    );
    const hasDefault = this.maybeParseExportDefaultSpecifier(
      node,
      maybeDefaultIdentifier,
    );
Repository: basir/node-react-ecommerce
File: backend/config.js (JavaScript)

Code before:
import dotenv from 'dotenv';

dotenv.config();

export default {
  PORT: process.env.PORT || 5000,
  MONGODB_URL: process.env.MONGODB_URL || 'mongodb://localhost/amazona',
  JWT_SECRET: process.env.JWT_SECRET || 'somethingsecret',
  PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID || 'sb',
};


Review comment (suggestion):
Basir, It seems like there is a time jump between your video 60 to this video 61 (Udemy course numeration),
because your project has changes that we didn't see before in past videos....
For example, this file called config wasn't there, no?? I think I can remember this file in the past of the course, but I'm not sure if we hid it...
I think there is some video in the middle, before this video.
I'm very sad because I can't implement correctly this feature due that... it is a mess for me 

Code after:
import dotenv from 'dotenv';

dotenv.config();

export default {
  PORT: process.env.PORT || 5000,
  MONGODB_URL: process.env.MONGODB_URL || 'mongodb://localhost/amazona',
  JWT_SECRET: process.env.JWT_SECRET || 'somethingsecret',
  PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID || 'sb',
  accessKeyId: process.env.accessKeyId || 'accessKeyId',
  secretAccessKey: process.env.secretAccessKey || 'secretAccessKey',
};
Repository: benawad/dogehouse
File: kousa/lib/socket_handler.ex (Elixir)

Code before:
    %{}
  end

  def f_handler("edit_profile", %{"data" => data}, %State{} = state) do
    %{
      isUsernameTaken:
        case BL.User.edit_profile(state.user_id, data) do
          :username_taken -> true
          _ -> false
        end
    }
  end

  def f_handler("get_blocked_from_room_users", %{"offset" => offset}, %State{} = state) do
    case BL.RoomBlock.get_blocked_users(state.user_id, offset) do
      {users, next_cursor} ->
        %{users: users, nextCursor: next_cursor}

      _ ->
        %{users: [], nextCursor: nil}
    end
  end

  def f_handler("get_user_profile", %{"userId" => id_or_username}, %State{} = _state) do
    user = Beef.Users.get_by_username(id_or_username)
    user = if is_nil(user), do: Beef.Users.get_by_id(id_or_username), else: user
    if not is_nil(user) do
      user
    else
      %{
        error: "User not found"
      }
    end
  end

  defp prepare_socket_msg(data, %State{compression: compression, encoding: encoding}) do
    data
    |> encode_data(encoding)
    |> compress_data(compression)
  end

  defp encode_data(data, :etf) do
    data
  end

  defp encode_data(data, _encoding) do
    data |> Poison.encode!()
  end

  defp compress_data(data, :zlib) do
    z = :zlib.open()

Review comment (suggestion):
Here's how you can check if the input is a `uuid` https://github.com/benawad/dogehouse/blob/staging/kousa/lib/routes/scheduled_room_routes.ex#L15

use that to know if you should lookup by id or username

Code after:
    BL.RoomBlock.unban(state.user_id, user_id)
    %{}
  end

  def f_handler("edit_profile", %{"data" => data}, %State{} = state) do
    %{
      isUsernameTaken:
        case BL.User.edit_profile(state.user_id, data) do
          :username_taken -> true
          _ -> false
        end
    }
  end

  def f_handler("get_blocked_from_room_users", %{"offset" => offset}, %State{} = state) do
    case BL.RoomBlock.get_blocked_users(state.user_id, offset) do
      {users, next_cursor} ->
        %{users: users, nextCursor: next_cursor}

      _ ->
        %{users: [], nextCursor: nil}
    end
  end

  def f_handler("get_user_profile", %{"userId" => id_or_username}, %State{} = _state) do
    case UUID.cast(id_or_username) do
      {:ok, uuid} ->
        Beef.Users.get_by_id(uuid)
      _ ->
        Beef.Users.get_by_username(id_or_username)
    end
  end

  defp prepare_socket_msg(data, %State{compression: compression, encoding: encoding}) do
    data
    |> encode_data(encoding)
    |> compress_data(compression)
  end

  defp encode_data(data, :etf) do
    data
  end

  defp encode_data(data, _encoding) do
    data |> Poison.encode!()
  end

  defp compress_data(data, :zlib) do
    z = :zlib.open()

    :zlib.deflateInit(z)
Repository: benawad/dogehouse
File: kibbeh/src/ui/Search/SearchBar.tsx (TypeScript)

Code before:
import React from "react";
import { SmSolidSearch } from "../../icons";
import { Input } from "../Input";

export interface SearchBarProps
  extends React.ComponentPropsWithoutRef<"input"> {
  inputClassName?: string;
}

export const SearchBar: React.FC<SearchBarProps> = ({
  className = "",
  inputClassName = "",
  ...props
}) => {
  return (
    <div
      className={`w-full bg-primary-700 text-primary-300 focus-within:text-primary-100 rounded-lg ${className}`}
    >
      <div className="h-full mx-4 flex items-center pointer-events-none">
        <SmSolidSearch />
      </div>
      <Input className={inputClassName} {...props} />
    </div>
  );
};


Review comment (suggestion):
Hey there! I think this component might be easier to use if instead of passing in a `mobile` prop, you use tailwinds built in stuff for checking for mobile screens. 

```suggestion
      className={`w-full bg-primary-700 text-primary-300 focus-within:text-primary-100 rounded-lg px-4 md:px-0 ${className}`}
```

This way it "automatically" knows it's on a phone vs desktop

Code after:
import React from "react";
import { SmSolidSearch } from "../../icons";
import { Input } from "../Input";

export interface SearchBarProps
  extends React.ComponentPropsWithoutRef<"input"> {
  inputClassName?: string;
  mobile?: boolean;
}

export const SearchBar: React.FC<SearchBarProps> = ({
  className = "",
  inputClassName = "",
  mobile = false,
  ...props
}) => {
  return (
    <div
      className={`w-full bg-primary-700 text-primary-300 focus-within:text-primary-100 rounded-lg ${
        mobile ? "px-4" : ""
      } ${className}`}
    >
      {!mobile && (
        <div className="h-full mx-4 flex items-center pointer-events-none">
          <SmSolidSearch />
        </div>
      )}
      <Input className={inputClassName} {...props} />
    </div>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/Search/SearchBar.tsx (TypeScript)

Code before:
import React from "react";
import { SmSolidSearch } from "../../icons";
import { Input } from "../Input";

export interface SearchBarProps
  extends React.ComponentPropsWithoutRef<"input"> {
  inputClassName?: string;
}

export const SearchBar: React.FC<SearchBarProps> = ({
  className = "",
  inputClassName = "",
  ...props
}) => {
  return (
    <div
      className={`w-full bg-primary-700 text-primary-300 focus-within:text-primary-100 rounded-lg ${className}`}
    >
      <div className="h-full mx-4 flex items-center pointer-events-none">
        <SmSolidSearch />
      </div>
      <Input className={inputClassName} {...props} />
    </div>
  );
};


Review comment (suggestion):
Similar to above, this can be 

```suggestion
        <div className="h-full mx-4 flex items-center pointer-events-none hidden md:block">
          <SmSolidSearch />
        </div>
```

Code after:
import { SmSolidSearch } from "../../icons";
import { Input } from "../Input";

export interface SearchBarProps
  extends React.ComponentPropsWithoutRef<"input"> {
  inputClassName?: string;
  mobile?: boolean;
}

export const SearchBar: React.FC<SearchBarProps> = ({
  className = "",
  inputClassName = "",
  mobile = false,
  ...props
}) => {
  return (
    <div
      className={`w-full bg-primary-700 text-primary-300 focus-within:text-primary-100 rounded-lg ${
        mobile ? "px-4" : ""
      } ${className}`}
    >
      {!mobile && (
        <div className="h-full mx-4 flex items-center pointer-events-none">
          <SmSolidSearch />
        </div>
      )}
      <Input className={inputClassName} {...props} />
    </div>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/ui/UserAvatar/MultipleUsers.tsx (TypeScript)

Code before:
import React from "react";

import { SingleUser } from "./SingleUser";

export interface AvatarProps {
  srcArray: string[];
  className?: string;
}

export const MultipleUsers: React.FC<AvatarProps> = ({
  srcArray,
  className = "",
}) => {
  return (
    <div className={className}>
      {srcArray.slice(0, 3).map((s, i) => (
        <span
          key={s + i}
          className=" rounded-full bg-primary-800 border-primary-800"
          style={{
            zIndex: srcArray.length - i,
            marginLeft: i > 0 ? -5 : 0,
            borderWidth: 1,
            height: 20,
            width: 20,
            overflow: "hidden",
          }}
        >
          <SingleUser src={s} size="xs" />
        </span>
      ))}
    </div>
  );
};


Review comment (suggestion):
```suggestion
          className="rounded-full bg-primary-800 border-primary-800"
```

Code after:
import React from "react";

import { SingleUser } from "./SingleUser";

export interface AvatarProps {
  srcArray: string[];
  className?: string;
}

export const MultipleUsers: React.FC<AvatarProps> = ({
  srcArray,
  className = "",
}) => {
  return (
    <div className={className}>
      {srcArray.slice(0, 3).map((s, i) => (
        <span
          key={s + i}
          className="rounded-full bg-primary-800 border-primary-800"
          style={{
            zIndex: srcArray.length - i,
            marginLeft: i > 0 ? -5 : 0,
            borderWidth: 1,
            height: 20,
            width: 20,
            overflow: "hidden",
          }}
        >
          <SingleUser src={s} size="xs" />
        </span>
      ))}
    </div>
  );
};
Repository: benawad/dogehouse
File: kibbeh/src/stories/mobile/FeaturedRoomCardHosts.story.tsx (TypeScript)

Code before:
import { Story } from "@storybook/react";
import React from "react";
import src from "../../img/avatar.png";
import { FeaturedRoomCardHosts, FeaturedRoomCardHostsProps } from "../../ui/mobile/FeaturedRoomCardHosts";

export default {
  title: 'FeaturedRoomCardHosts',
  component: FeaturedRoomCardHosts
};

const Hosts: Story<FeaturedRoomCardHostsProps> = () => {
  return (
    <FeaturedRoomCardHosts avatars={[src, src]} names={['Marcus Bloch', 'Don Velez']} />
  );
};

const One: Story<FeaturedRoomCardHostsProps> = () => {
  return (
    <FeaturedRoomCardHosts avatars={[src]} names={['Marcus Bloch']} />
  );
};

export const Main = Hosts.bind({});
export const OneHost = One.bind({})

Review comment (suggestion):
```suggestion
export const OneHost = One.bind({});

```

Code after:
import { Story } from "@storybook/react";
import React from "react";
import src from "../../img/avatar.png";
import { FeaturedRoomCardHosts, FeaturedRoomCardHostsProps } from "../../ui/mobile/FeaturedRoomCardHosts";

export default {
  title: 'FeaturedRoomCardHosts',
  component: FeaturedRoomCardHosts
};

const Hosts: Story<FeaturedRoomCardHostsProps> = () => {
  return (
    <FeaturedRoomCardHosts avatars={[src, src]} names={['Marcus Bloch', 'Don Velez']} />
  );
};

const One: Story<FeaturedRoomCardHostsProps> = () => {
  return (
    <FeaturedRoomCardHosts avatars={[src]} names={['Marcus Bloch']} />
  );
};

export const Main = Hosts.bind({});
export const OneHost = One.bind({});
Repository: benawad/dogehouse
File: kibbeh/src/stories/mobile/FeaturedRoomCardAvatars.story.tsx (TypeScript)

Code before:
import { Story } from "@storybook/react";
import React from "react";
import { FeaturedRoomCardAvatars, FeaturedRoomCardAvatarsProps } from '../../ui/mobile/FeaturedRoomCardAvatars'
import src from "../../img/avatar.png";

export default {
  title: 'FeaturedRoomCardAvatars',
  component: FeaturedRoomCardAvatars
};

const Avatars: Story<FeaturedRoomCardAvatarsProps> = () => {
  return (
    <FeaturedRoomCardAvatars avatars={[src, src]} />
  );
};

const One: Story<FeaturedRoomCardAvatarsProps> = () => {
  return (
    <FeaturedRoomCardAvatars avatars={[src]} />
  );
}

export const Main = Avatars.bind({});
export const OneAvatar = One.bind({})


Review comment (suggestion):
```suggestion
export const OneAvatar = One.bind({});
```

Code after:
import { Story } from "@storybook/react";
import React from "react";
import { FeaturedRoomCardAvatars, FeaturedRoomCardAvatarsProps } from '../../ui/mobile/FeaturedRoomCardAvatars'
import src from "../../img/avatar.png";

export default {
  title: 'FeaturedRoomCardAvatars',
  component: FeaturedRoomCardAvatars
};

const Avatars: Story<FeaturedRoomCardAvatarsProps> = () => {
  return (
    <FeaturedRoomCardAvatars avatars={[src, src]} />
  );
};

const One: Story<FeaturedRoomCardAvatarsProps> = () => {
  return (
    <FeaturedRoomCardAvatars avatars={[src]} />
  );
}

export const Main = Avatars.bind({});
export const OneAvatar = One.bind({});