diff --git a/Cyberneticmilitaryemblemdesign/README.md b/Cyberneticmilitaryemblemdesign/README.md new file mode 100644 index 0000000..8162cfe --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/README.md @@ -0,0 +1,11 @@ + + # Cybernetic Military Emblem Design + + This is a code bundle for Cybernetic Military Emblem Design. The original project is available at https://www.figma.com/design/gJMrFxNPWaI21UT4uOQJ02/Cybernetic-Military-Emblem-Design. + + ## Running the code + + Run `npm i` to install the dependencies. + + Run `npm run dev` to start the development server. + \ No newline at end of file diff --git a/Cyberneticmilitaryemblemdesign/index.html b/Cyberneticmilitaryemblemdesign/index.html new file mode 100644 index 0000000..2a9cac7 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/index.html @@ -0,0 +1,15 @@ + + + + + + + Cybernetic Military Emblem Design + + + +
+ + + + \ No newline at end of file diff --git a/Cyberneticmilitaryemblemdesign/package.json b/Cyberneticmilitaryemblemdesign/package.json new file mode 100644 index 0000000..06938a9 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/package.json @@ -0,0 +1,59 @@ + + { + "name": "Cybernetic Military Emblem Design", + "version": "0.1.0", + "private": true, + "dependencies": { + "@radix-ui/react-accordion": "^1.2.3", + "@radix-ui/react-alert-dialog": "^1.1.6", + "@radix-ui/react-aspect-ratio": "^1.1.2", + "@radix-ui/react-avatar": "^1.1.3", + "@radix-ui/react-checkbox": "^1.1.4", + "@radix-ui/react-collapsible": "^1.1.3", + "@radix-ui/react-context-menu": "^2.2.6", + "@radix-ui/react-dialog": "^1.1.6", + "@radix-ui/react-dropdown-menu": "^2.1.6", + "@radix-ui/react-hover-card": "^1.1.6", + "@radix-ui/react-label": "^2.1.2", + "@radix-ui/react-menubar": "^1.1.6", + "@radix-ui/react-navigation-menu": "^1.2.5", + "@radix-ui/react-popover": "^1.1.6", + "@radix-ui/react-progress": "^1.1.2", + "@radix-ui/react-radio-group": "^1.2.3", + "@radix-ui/react-scroll-area": "^1.2.3", + "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-separator": "^1.1.2", + "@radix-ui/react-slider": "^1.2.3", + "@radix-ui/react-slot": "^1.1.2", + "@radix-ui/react-switch": "^1.1.3", + "@radix-ui/react-tabs": "^1.1.3", + "@radix-ui/react-toggle": "^1.1.2", + "@radix-ui/react-toggle-group": "^1.1.2", + "@radix-ui/react-tooltip": "^1.1.8", + "class-variance-authority": "^0.7.1", + "clsx": "*", + "cmdk": "^1.1.1", + "embla-carousel-react": "^8.6.0", + "input-otp": "^1.4.2", + "lucide-react": "^0.487.0", + "next-themes": "^0.4.6", + "react": "^18.3.1", + "react-day-picker": "^8.10.1", + "react-dom": "^18.3.1", + "react-hook-form": "^7.55.0", + "react-resizable-panels": "^2.1.7", + "recharts": "^2.15.2", + "sonner": "^2.0.3", + "tailwind-merge": "*", + "vaul": "^1.1.2" + }, + "devDependencies": { + "@types/node": "^20.10.0", + "@vitejs/plugin-react-swc": "^3.10.2", + "vite": "6.3.5" + }, + "scripts": { + "dev": "vite", + "build": "vite build" + } + } \ No newline at end of file diff --git a/Cyberneticmilitaryemblemdesign/src/App.tsx b/Cyberneticmilitaryemblemdesign/src/App.tsx new file mode 100644 index 0000000..3a2c480 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/App.tsx @@ -0,0 +1,9 @@ +import { SudarshanEmblem } from './components/SudarshanEmblem'; + +export default function App() { + return ( +
+ +
+ ); +} diff --git a/Cyberneticmilitaryemblemdesign/src/Attributions.md b/Cyberneticmilitaryemblemdesign/src/Attributions.md new file mode 100644 index 0000000..9b7cd4e --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/Attributions.md @@ -0,0 +1,3 @@ +This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md). + +This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license). \ No newline at end of file diff --git a/Cyberneticmilitaryemblemdesign/src/components/SudarshanEmblem.tsx b/Cyberneticmilitaryemblemdesign/src/components/SudarshanEmblem.tsx new file mode 100644 index 0000000..818077b --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/SudarshanEmblem.tsx @@ -0,0 +1,258 @@ +import { useEffect, useState } from 'react'; + +export function SudarshanEmblem() { + return ( +
+ + + {/* Simple gradients for depth */} + + + + + + + + + + + + + + + + + {/* Outer border circle */} + + + {/* Radar grid base */} + + {/* Concentric circles for radar */} + {[100, 140, 180].map((r, i) => ( + + ))} + + {/* Radar grid lines */} + {[...Array(8)].map((_, i) => { + const angle = (i * 45 * Math.PI) / 180; + const x2 = 250 + Math.cos(angle) * 180; + const y2 = 250 + Math.sin(angle) * 180; + return ( + + ); + })} + + + {/* Shield dome structure */} + + {/* Main shield dome path */} + + + {/* Shield outline - stronger */} + + + {/* Shield grid lines - vertical */} + {[-60, -30, 0, 30, 60].map((offset, i) => ( + + ))} + + {/* Shield grid lines - horizontal arcs */} + {[120, 160, 200, 240].map((y, i) => { + const width = 140 - (i * 20); + return ( + + ); + })} + + + {/* Sudarshana Chakra - 8 blades */} + + {/* Central hub */} + + + {/* Inner detail ring */} + + + {/* 8 Chakra blades */} + {[...Array(8)].map((_, i) => { + const angle = i * 45; + return ( + + {/* Main blade shape */} + + + {/* Blade edge highlight */} + + + {/* Outer blade extension */} + + + ); + })} + + {/* Center circle detail */} + + + {/* Center dot */} + + + + {/* Corner brackets for military insignia look */} + {[ + { x: 40, y: 40, rotate: 0 }, + { x: 460, y: 40, rotate: 90 }, + { x: 460, y: 460, rotate: 180 }, + { x: 40, y: 460, rotate: 270 } + ].map((corner, i) => ( + + + + ))} + + {/* Top banner */} + + + + + {/* Bottom banner */} + + + + + {/* Side emblems */} + + + + {/* Stars accent */} + + + + + + + {/* Project text */} +
+

+ PROJECT SUDARSHAN +

+ +
+ +

+ DEFENSE • SURVEILLANCE • PROTECTION +

+
+
+ ); +} \ No newline at end of file diff --git a/Cyberneticmilitaryemblemdesign/src/components/figma/ImageWithFallback.tsx b/Cyberneticmilitaryemblemdesign/src/components/figma/ImageWithFallback.tsx new file mode 100644 index 0000000..0e26139 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/figma/ImageWithFallback.tsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react' + +const ERROR_IMG_SRC = + 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg==' + +export function ImageWithFallback(props: React.ImgHTMLAttributes) { + const [didError, setDidError] = useState(false) + + const handleError = () => { + setDidError(true) + } + + const { src, alt, style, className, ...rest } = props + + return didError ? ( +
+
+ Error loading image +
+
+ ) : ( + {alt} + ) +} diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/accordion.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/accordion.tsx new file mode 100644 index 0000000..aa2c37b --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/accordion.tsx @@ -0,0 +1,66 @@ +"use client"; + +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion@1.2.3"; +import { ChevronDownIcon } from "lucide-react@0.487.0"; + +import { cn } from "./utils"; + +function Accordion({ + ...props +}: React.ComponentProps) { + return ; +} + +function AccordionItem({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AccordionTrigger({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + svg]:rotate-180", + className, + )} + {...props} + > + {children} + + + + ); +} + +function AccordionContent({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + +
{children}
+ + ); +} + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/alert-dialog.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..68f3605 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/alert-dialog.tsx @@ -0,0 +1,157 @@ +"use client"; + +import * as React from "react"; +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog@1.1.6"; + +import { cn } from "./utils"; +import { buttonVariants } from "./button"; + +function AlertDialog({ + ...props +}: React.ComponentProps) { + return ; +} + +function AlertDialogTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AlertDialogPortal({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AlertDialogOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AlertDialogContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + + ); +} + +function AlertDialogHeader({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function AlertDialogFooter({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function AlertDialogTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AlertDialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AlertDialogAction({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AlertDialogCancel({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +}; diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/alert.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/alert.tsx new file mode 100644 index 0000000..856b94d --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/alert.tsx @@ -0,0 +1,66 @@ +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority@0.7.1"; + +import { cn } from "./utils"; + +const alertVariants = cva( + "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", + { + variants: { + variant: { + default: "bg-card text-card-foreground", + destructive: + "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +function Alert({ + className, + variant, + ...props +}: React.ComponentProps<"div"> & VariantProps) { + return ( +
+ ); +} + +function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ); +} + +function AlertDescription({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
+ ); +} + +export { Alert, AlertTitle, AlertDescription }; diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/aspect-ratio.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..2a2f462 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,11 @@ +"use client"; + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio@1.1.2"; + +function AspectRatio({ + ...props +}: React.ComponentProps) { + return ; +} + +export { AspectRatio }; diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/avatar.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/avatar.tsx new file mode 100644 index 0000000..589b166 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/avatar.tsx @@ -0,0 +1,53 @@ +"use client"; + +import * as React from "react"; +import * as AvatarPrimitive from "@radix-ui/react-avatar@1.1.3"; + +import { cn } from "./utils"; + +function Avatar({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/badge.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/badge.tsx new file mode 100644 index 0000000..3f8eff8 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/badge.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot@1.1.2"; +import { cva, type VariantProps } from "class-variance-authority@0.7.1"; + +import { cn } from "./utils"; + +const badgeVariants = cva( + "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +function Badge({ + className, + variant, + asChild = false, + ...props +}: React.ComponentProps<"span"> & + VariantProps & { asChild?: boolean }) { + const Comp = asChild ? Slot : "span"; + + return ( + + ); +} + +export { Badge, badgeVariants }; diff --git a/Cyberneticmilitaryemblemdesign/src/components/ui/breadcrumb.tsx b/Cyberneticmilitaryemblemdesign/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..d2adf98 --- /dev/null +++ b/Cyberneticmilitaryemblemdesign/src/components/ui/breadcrumb.tsx @@ -0,0 +1,109 @@ +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot@1.1.2"; +import { ChevronRight, MoreHorizontal } from "lucide-react@0.487.0"; + +import { cn } from "./utils"; + +function Breadcrumb({ ...props }: React.ComponentProps<"nav">) { + return