chore: re add kebab case

Blazity · Oct 18, 2024 · 23c85d9 · 23c85d9
1 parent 885eccc
commit 23c85d9
Show file tree

Hide file tree

Showing 119 changed files with 5,683 additions and 0 deletions.
diff --git a/starters/shopify-algolia/components/announcement-bar.tsx b/starters/shopify-algolia/components/announcement-bar.tsx
@@ -0,0 +1,13 @@
+import Link from "next/link"
+import { cn } from "utils/cn"
+
+export function AnnouncementBar({ className }: { className?: string }) {
+  return (
+    <div className={cn("flex h-[40px] w-full items-center justify-center text-nowrap bg-black text-center text-base/[18px] text-white", className)}>
+      Sale 50% OFF
+      <Link prefetch={false} href="/search" className="ml-2 underline hover:no-underline">
+        Shop Now
+      </Link>
+    </div>
+  )
+}
diff --git a/starters/shopify-algolia/components/auth-actions.tsx b/starters/shopify-algolia/components/auth-actions.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { Button } from "components/ui/button-old"
+import { useModalStore } from "stores/modal-store"
+
+export function AuthActions() {
+  const openModal = useModalStore((s) => s.openModal)
+
+  return (
+    <div className="flex items-center space-x-4">
+      <Button className="leading-[18px]" onClick={() => openModal("login")}>
+        Log In
+      </Button>
+      <Button className="leading-[18px] hover:text-white" variant="secondary" isAnimated={false} onClick={() => openModal("signup")}>
+        Sign Up
+      </Button>
+    </div>
+  )
+}
diff --git a/starters/shopify-algolia/components/breadcrumbs.tsx b/starters/shopify-algolia/components/breadcrumbs.tsx
@@ -0,0 +1,36 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "components/ui/breadcrumb"
+import React from "react"
+import { cn } from "utils/cn"
+
+interface BreadcrumbsProps {
+  items: Record<string, string>
+  className?: string
+}
+
+export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList className="no-scrollbar flex items-center gap-1.5 overflow-x-scroll  whitespace-nowrap text-xs  md:text-base/[18px]">
+        {Object.entries(items).map(([title, href], idx) => {
+          const isLast = idx + 1 === Object.keys(items).length
+
+          return (
+            <React.Fragment key={title + href}>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  prefetch={false}
+                  aria-current={isLast ? "page" : undefined}
+                  className={cn("text-neutral-500 hover:underline", isLast && "font-medium underline")}
+                  href={href}
+                >
+                  {title}
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator />}
+            </React.Fragment>
+          )
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/starters/shopify-algolia/components/call-to-action.tsx b/starters/shopify-algolia/components/call-to-action.tsx
@@ -0,0 +1,32 @@
+import { Button } from "components/ui/button-old"
+import { Input } from "components/ui/input"
+import { Label } from "components/ui/label"
+
+export function CallToAction() {
+  return (
+    <div className="border-y border-black">
+      <div className="mx-auto my-0 w-full max-w-container-md px-4 py-16 xl:px-0">
+        <div className="grid grid-cols-1 items-center gap-8 md:grid-cols-2">
+          <div>
+            <p className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Become a member and receive our special discounts.</p>
+          </div>
+          <div>
+            <form className="ml-0 flex max-w-md flex-col gap-4 md:ml-auto">
+              <Label>
+                <span className="sr-only">Name</span>
+                <Input placeholder="Name" />
+              </Label>
+              <Label>
+                <span className="sr-only">Email</span>
+                <Input placeholder="Email" type="email" />
+              </Label>
+              <Button size="lg" className="w-fit bg-black text-center text-white">
+                Become a Member
+              </Button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/starters/shopify-algolia/components/expandable-content.tsx b/starters/shopify-algolia/components/expandable-content.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { ChevronIcon } from "components/icons/chevron-icon"
+import { type ReactNode, useEffect, useRef, useState } from "react"
+import { cn } from "utils/cn"
+
+type ExpandableContentProps = {
+  children: ReactNode
+  className?: string
+  lines: 1 | 2 | 3 | 4 | 5 | 6
+}
+
+export const ExpandableContent = ({ children, className, lines = 2 }: ExpandableContentProps) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isClamped, setIsClamped] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!contentRef?.current) return
+
+    const checkClamp = () => {
+      if (!contentRef.current) return
+      setIsClamped(contentRef.current.scrollHeight > contentRef.current.clientHeight)
+    }
+
+    checkClamp()
+    window.addEventListener("resize", checkClamp)
+    return () => window.removeEventListener("resize", checkClamp)
+  }, [])
+
+  return (
+    <div>
+      <div
+        ref={contentRef}
+        style={
+          {
+            "--lines": lines,
+          } as React.CSSProperties
+        }
+        className={cn(!isExpanded && "line-clamp-[var(--lines)]", className)}
+      >
+        {children}
+      </div>
+      {isClamped && (
+        <button className={cn("flex items-center gap-1 bg-transparent text-sm underline")} onClick={() => setIsExpanded((prev) => !prev)}>
+          {isExpanded ? "Read less" : "Read more"}
+          <ChevronIcon className={isExpanded ? "rotate-180" : "rotate-0"} />
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/starters/shopify-algolia/components/footer.tsx b/starters/shopify-algolia/components/footer.tsx
@@ -0,0 +1,156 @@
+import Link from "next/link"
+
+export function Footer() {
+  return (
+    <div className="bg-black text-white">
+      <div className="mx-auto flex w-full max-w-container-md flex-col justify-between px-4 xl:px-0">
+        <header className="flex justify-end gap-4 pt-8">
+          <a rel="noreferrer" target="_blank" href={"https://www.facebook.com/blazity/"} aria-label="Facebook link">
+            <FacebookIcon className="text-white" />
+          </a>
+
+          <a rel="noreferrer" target="_blank" href={"https://twitter.com/blazity"} aria-label="Twitter link">
+            <TwitterIcon className="text-white" />
+          </a>
+
+          <a rel="noreferrer" target="_blank" href={"https://www.instagram.com/blazitysoftware/"} aria-label="Instagram link">
+            <InstagramIcon className="text-white" />
+          </a>
+
+          <a rel="noreferrer" target="_blank" href={"https://www.linkedin.com/company/blazity"} aria-label="Linkedin link">
+            <LinkedinIcon className="text-white" />
+          </a>
+
+          <a rel="noreferrer" target="_blank" href={"https://www.youtube.com/channel/UCYDeWaSWiOHn_lUHY-u1VYw/videos"} aria-label="Youtube link">
+            <YoutubeIcon className="text-white" />
+          </a>
+        </header>
+        <main className="py-32">
+          <a href="https://v0.dev/" rel="noreferrer" target="_blank">
+            <span className="focus:ring-ring mb-4 inline-flex w-fit items-center whitespace-nowrap rounded-full border border-transparent bg-white px-2.5 py-0.5 text-xs font-semibold text-black transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2">
+              Designed with v0
+            </span>
+          </a>
+          <p className="text-3xl font-bold">Missing feature? </p>
+          <p className="mt-1 text-xl">
+            <a className="p-1 underline" href="mailto:[email protected]">
+              Let us know
+            </a>
+            , we&apos;ll build it!
+          </p>
+        </main>
+        <footer className="mt-auto flex flex-col items-center justify-between pb-8 text-neutral-300 md:flex-row">
+          <span className="text-sm">2024 © Lorem Ipsum. All Rights Reserved.</span>
+          <div className="mt-4 flex space-x-4 md:mt-0">
+            <Link prefetch={false} className="text-sm hover:underline" href="/privacy-policy">
+              Privacy and Cookie Policy
+            </Link>
+            <Link prefetch={false} className="text-sm hover:underline" href="/terms-conditions">
+              Terms & Conditions
+            </Link>
+          </div>
+        </footer>
+      </div>
+    </div>
+  )
+}
+
+function FacebookIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+    </svg>
+  )
+}
+
+function InstagramIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+    </svg>
+  )
+}
+
+function LinkedinIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+      <rect width="4" height="12" x="2" y="9" />
+      <circle cx="4" cy="4" r="2" />
+    </svg>
+  )
+}
+
+function TwitterIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+    </svg>
+  )
+}
+
+function YoutubeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
+      <path d="m10 15 5-3-5-3z" />
+    </svg>
+  )
+}
diff --git a/starters/shopify-algolia/components/generic-modal.tsx b/starters/shopify-algolia/components/generic-modal.tsx
@@ -0,0 +1,30 @@
+import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle } from "components/ui/dialog"
+import { CloseIcon } from "components/icons/close-icon"
+import { cn } from "utils/cn"
+
+interface FacetsModalProps {
+  open?: boolean
+  onOpenChange?: () => void
+  title?: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function GenericModal({ open, onOpenChange, title, children, className }: FacetsModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("max-w-[90%] content-start bg-white sm:max-w-[425px] ", className)}>
+        <DialogHeader>{!!title && <DialogTitle>{title}</DialogTitle>}</DialogHeader>
+        {children}
+        <DialogClose className="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm bg-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+          <CloseIcon />
+          <span className="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export function Placeholder() {
+  return <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"></div>
+}
diff --git a/starters/shopify-algolia/components/icons/arrow-icon.tsx b/starters/shopify-algolia/components/icons/arrow-icon.tsx
@@ -0,0 +1,12 @@
+export function ArrowIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} width="30" height="21" viewBox="0 0 30 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.0656 9.63349H3.06277L10.8418 1.64464C11.2071 1.26798 11.2071 0.658192 10.8418 0.282495C10.4764 -0.094165 9.88491 -0.094165 9.52049 0.282495L0.269811 9.81845C-0.0899372 10.1893 -0.0899372 10.8097 0.269811 11.1806L9.52049 20.7175C9.88585 21.0942 10.4773 21.0942 10.8418 20.7175C11.2071 20.3408 11.2071 19.7311 10.8418 19.3554L3.06277 11.5601H29.0656C29.5814 11.5601 30 11.1286 30 10.5968C30 10.0651 29.5814 9.63349 29.0656 9.63349Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/starters/shopify-algolia/components/icons/caret-sort-icon.tsx b/starters/shopify-algolia/components/icons/caret-sort-icon.tsx
@@ -0,0 +1,12 @@
+export function CaretSortIcon({ className }: { className?: string }) {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
+      <path
+        d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  )
+}
diff --git a/starters/shopify-algolia/components/icons/check-icon.tsx b/starters/shopify-algolia/components/icons/check-icon.tsx
@@ -0,0 +1,12 @@
+export function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path
+        d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  )
+}
diff --git a/starters/shopify-algolia/components/icons/chevron-icon.tsx b/starters/shopify-algolia/components/icons/chevron-icon.tsx
@@ -0,0 +1,7 @@
+export function ChevronIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0.999876 1.03964L4.89244 4.89256L8.74536 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  )
+}
diff --git a/starters/shopify-algolia/components/icons/close-icon.tsx b/starters/shopify-algolia/components/icons/close-icon.tsx
@@ -0,0 +1,7 @@
+export function CloseIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} height="16px" id="Layer_1" version="1.1" viewBox="0 0 512 512" width="16px" xmlns="http://www.w3.org/2000/svg">
+      <path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4  L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1  c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1  c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z" />
+    </svg>
+  )
+}