Avatar

A celestial avatar for profile representation

Galaxy Avatar

An avatar for identification

Preview

import React from "react";

const Avatar = () => {
  return (
    <div className="w-16 h-16 rounded-full overflow-hidden bg-gray-200 flex justify-center items-center">
      <img
        src="/images/alien1.avif"
        alt="Avatar Image"
        width={64}
        height={64}
        className="object-cover"
      />
    </div>
  );
};

export default Avatar;

Usage Example

import React from "react";
import Avatar from "./components/comp/Avatar/GalaxyAvatar";

const App = () => {
  return (
    <div>
      <Avatar />
    </div>
  );
};

export default App;

Earth Avatar

An avatar for profile identification on earth

Preview

Good morning

Zyphorax

import React from "react";
import { PiAlienBold } from "react-icons/pi";

const Avatar = () => {
  return (
    <div className="flex items-center gap-2">
      <div className="w-16 h-16 rounded-full overflow-hidden bg-gray-200 flex justify-center items-center">
        <img
          src="/images/alien1.avif"
          alt="Avatar Image"
          width={64}
          height={64}
          className="object-cover"
        />
      </div>
      <div>
        <p className="text-xs text-gray-700">Good morning</p>
        <div className="flex items-center">
          <p className="font-semibold text-base mr-1">Zyphorax</p>
          <PiAlienBold />
        </div>
      </div>
    </div>
  );
};

export default Avatar;

Usage Example

import React from "react";
import Avatar from "./components/comp/Avatar/EarthAvatar";

const App = () => {
  return (
    <div>
      <Avatar />
    </div>
  );
};

export default App;