components: add Avatar (#6)

* components: add `Avatar`

* .

* simplify and more

* oops

* read somewhere to stick to undefined instead of null

---------

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

.vscode/settings.json

@@ -1,14 +1,26 @@
 {
 	"cSpell.words": [
+		"anatolzak",
+		"benmccann",
 		"Choicebox",
+		"ciscoheat",
 		"Combobox",
-		"exmarkdown",
+		"Conduitry",
+		"dummdidumm",
 		"geist",
+		"geoffrich",
+		"Gonz",
+		"huntabyte",
+		"lukeed",
 		"nums",
+		"ollema",
 		"Paperclip",
 		"poppanator",
 		"shadcn",
 		"shiki",
+		"shyakadavis",
+		"techniq",
+		"trueadm",
 		"Turborepo",
 		"WAAPI"
 	]

package.json

@@ -38,6 +38,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"bits-ui": "^0.21.12",
 		"clsx": "^2.1.1",
 		"tailwind-merge": "^2.4.0",
 		"tailwind-variants": "^0.2.1"

src/lib/assets/icons/index.ts

@@ -4,6 +4,7 @@ import BrandAssets from './brand-assets.svg?component';
 import CharBarMiddle from './chart-bar-middle.svg?component';
 import CharTrendingDown from './chart-trending-down.svg?component';
 import Check from './check.svg?component';
+import ChevronLeft from './chevron-left.svg?component';
 import ChevronRightSmall from './chevron-right-small.svg?component';
 import ChevronRight from './chevron-right.svg?component';
 import ClockDashed from './clock-dashed.svg?component';
@@ -21,7 +22,10 @@ import GridSquare from './grid-square.svg?component';
 import Inbox from './inbox.svg?component';
 import Key from './key.svg?component';
 import Link from './link.svg?component';
-import LogoGeist from './logo-geist.svg';
+import LogoBitbucketColor from './logo-bitbucket-color.svg?component';
+import LogoGeist from './logo-geist.svg?component';
+import LogoGithub from './logo-github.svg?component';
+import LogoGitlab from './logo-gitlab.svg?component';
 import LogoNext from './logo-next.svg?component';
 import LogoTurborepo from './logo-turborepo.svg?component';
 import LogoV0 from './logo-v0.svg?component';
@@ -44,6 +48,7 @@ export const Icons = {
 	CharBarMiddle,
 	CharTrendingDown,
 	Check,
+	ChevronLeft,
 	ChevronRightSmall,
 	ChevronRight,
 	ClockDashed,
@@ -61,7 +66,10 @@ export const Icons = {
 	Inbox,
 	Key,
 	Link,
+	LogoBitbucketColor,
 	LogoGeist,
+	LogoGithub,
+	LogoGitlab,
 	LogoNext,
 	LogoTurborepo,
 	LogoV0,